<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <link rel="apple-touch-icon" sizes="76x76" href="../src/assets/img/apple-icon.png" />
    <link rel="icon" type="image/png" href="../src/assets/img/favicon.png" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <title>Material Dashboard PRO Angular by Creative Tim | Premium Bootstrap Admin Template</title>
    <meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport' />
    <meta name="viewport" content="width=device-width" />

	<!-- Bootstrap core CSS     -->
    <link href="../src/assets/css/bootstrap.min.css" rel="stylesheet" />
    <!--  Material Dashboard CSS    -->
    <link href="../src/assets/css/material-dashboard.css" rel="stylesheet" />
    <!--  CSS for Demo Purpose, don't include it in your project     -->
    <link href="../src/assets/css/demo.css" rel="stylesheet" />
    <!--     Fonts and icons     -->
    <link href="http://maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons" />
    <link href="css/demo-documentation.css" rel="stylesheet" />
    <script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js"></script>
    <style>
        pre.prettyprint {
            background-color: #eee;
            border: 0px;
            margin-bottom: 60px;
            margin-top: 30px;
            padding: 20px;
            text-align: left;
        }

        .atv,
        .str {
            color: #05AE0E;
        }

        .tag,
        .pln,
        .kwd {
            color: #3472F7;
        }

        .atn {
            color: #2C93FF;
        }

        .pln {
            color: #333;
        }

        .com {
            color: #999;
        }

        .space-top {
            margin-top: 50px;
        }

        .area-line {
            border: 1px solid #999;
            border-left: 0;
            border-right: 0;
            color: #666;
            display: block;
            margin-top: 20px;
            padding: 8px 0;
            text-align: center;
        }

        .area-line a {
            color: #666;
        }

        .container-fluid {
            padding-right: 15px;
            padding-left: 15px;
        }
    </style>
    <!--     Fonts and icons     -->
    <link href="http://maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons" />
</head>

<body class="components-page">
    <nav class="navbar navbar-transparent navbar-default navbar-fixed-top navbar-color-on-scroll">
        <div class="container">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
                <button id="menu-toggle" type="button" class="navbar-toggle">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar bar1"></span>
                    <span class="icon-bar bar2"></span>
                    <span class="icon-bar bar3"></span>
                </button>
                <a href="https://www.creative-tim.com">
                    <div class="logo-container">
                        <div class="logo">
                            <img src="../src/assets/img/new_logo.png" alt="Creative Tim Logo">
                        </div>
                        <div class="brand">
                            Creative Tim
                        </div>
                    </div>
                </a>
            </div>
            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse text-center">
        		<ul class="nav navbar-nav navbar-center">
        			<li class="visible-md visible-lg">
        				<div class="navbar-title hidden text-center">
        					<h4>
        						<div class="image-container">
        							<img src="../src/assets/img/angular2-logo.png" alt="Angular2 Logo">
        						</div>
        						Material Dashboard PRO Angular 2
        					</h4>
        				</div>
        			</li>
        		</ul>
        		<ul  class="nav navbar-nav navbar-right">
        			<li>
                        <a href="https://github.com/creativetimofficial/material-dashboard-pro-angular/issues" target="_blank">Have an issue?</a>
                    </li>
            	</ul>
            </div>
            <!-- /.navbar-collapse -->
        </div>
        <!-- /.container-fluid -->
    </nav>
    <div class="page-header header-filter" style="background-image: url('../src/assets/img/header-doc.jpeg');">
        <div class="container">
            <div class="row">
                <div class="col-md-8 col-md-offset-2">
                    <div class="image-header">
                        <img src="../src/assets/img/angular2-logo.png" alt="Angular2 Logo">
                    </div>
                    <h1 class="title text-center">Tutorial and Components</h1>
                </div>
            </div>
        </div>
    </div>
    <div class="main main-raised">
        <div class="section">
            <div class="container">
                <div class="row">
                    <div class="col-md-3">
                        <div class="fixed-section" data-spy="affix" data-offset-top="340">
                            <ul>
                                <li>
                                    <a href="#license">License</a>
                                </li>
                                <li>
                                    <a href="#tutorial">Tutorial</a>
                                </li>
                                <li>
                                    <a href="#pablo">&nbsp;</a>
                                </li>
                                <li>
                                    <a href="#components">
                                        <b>Components</b>
                                    </a>
                                </li>
                                <li>
                                    <a href="#buttons-row">Buttons</a>
                                </li>
                                <li>
                                    <a href="#checkbox-row">Checkbox/Radio/Toggle</a>
                                </li>
                                <li>
                                    <a href="#dropdown-row">Dropdown/Dropup</a>
                                </li>
                                <li>
                                    <a href="#inputs-row">Inputs</a>
                                </li>
                                <li>
                                    <a href="#textarea-row">Textarea</a>
                                </li>
                                <li>
                                    <a href="#select-row">Select Bootstrap</a>
                                </li>
                                <li>
                                    <a href="#jasny-row">FileUpload Jasny</a>
                                </li>
                                <li>
                                    <a href="#navbar-row">Navigation</a>
                                </li>
                                <li>
                                    <a href="#icons-row">Material Icons</a>
                                </li>
                                <li>
                                    <a href="#tables-row">Tables</a>
                                </li>
                                <li>
                                    <a href="#tags-row">jQuery Tagsinput</a>
                                </li>
                                <li>
                                    <a href="#notification-row">Bootstrap Notify</a>
                                </li>
                                <li>
                                    <a href="#datetimepicker-row">Bootstrap Datetimepicker</a>
                                </li>
                                <li>
                                    <a href="#sweetalert-row">Sweet Alert 2</a>
                                </li>
                                <li>
                                    <a href="#validation-row">jQuery Validation</a>
                                </li>
                                <li>
                                    <a href="#perfectscrollbar-row">Perfect Scrollbar</a>
                                </li>
                                <li>
                                    <a href="#cards-row">Cards</a>
                                </li>
                                <li>
                                    <a href="#changing-colors">Changing Colors (SASS)</a>
                                </li>
                                <li>
                                    <a href="#api">How to setup Google API Keys</a>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <div class="col-md-8">
                        <!-- License Row -->
                        <div class="tim-row tim-row-first" id="license">
                            <h2 class="text-center">License</h2>
                            <legend></legend>
                            <p>
                                Currently, on
                                <a href="https://www.creative-tim.com" target="_blank">Creative Tim</a> you can get the products with two types of licenses: Personal or Developer. All the freebies are licensed to Personal License as default. If you are making a paid purchase, be sure to go through the table with the rights and the guidelines, so you can know what is the best fit for you. View the rights table and the description for each license on our
                                <a target="_blank" href="https://www.creative-tim.com/license?ref=license-page-md-pro-angular">Official License Page</a>.
                            </p>
                        </div>
                        <!-- Tutorial Row -->
                        <div class="tim-row" id="tutorial">
                            <h2 class="text-center">Short Description</h2>
                            <legend></legend>
                            <p>
                                <b>Material Dashboard PRO Angular</b> is a Premium Material Bootstrap Admin with a fresh, new design inspired by Google's Material Design. It is based on the popular Bootstrap framework and comes packed with multiple third-party plugins. All components are built to fit perfectly with each other, while aligning to the material concepts.
                            </p>
                        </div>
                        <div class="tim-row">
                            <h2 class="text-center">Getting Started</h2>
                            <legend></legend>
                            <p>
                                The
                                <b>Material Dashboard Pro</b> is built on top of Bootstrap 3, so you can safely use it on your existing or new Bootstrap project. No line of code from Bootstrap 3 was changed, so you don't have to worry about undesired effects in your work.
                            </p>
                            <ul role="tablist" class="nav nav-tabs">
                                <li role="presentation" class="active">
                                    <a href="#angular2" data-toggle="tab">Commands for Angular2</a>
                                </li>
                                <li>
                                    <a href="#angular-cli" data-toggle="tab">Commands for Angular CLI</a>
                                </li>
                            </ul>
                            <div class="tab-content">
                                <div id="angular2" class="tab-pane active">
                                    <ul>
                                        <li><p>Install NodeJs from <a href="https://nodejs.org/en" target="_blank">NodeJs Official Page</a></p></li>
                                        <li><p>Open Terminal</p></li>
                                        <li><p>Go to your file project</p></li>
                                        <li><p>Run in terminal:<pre>npm install</pre></p></li>
                                        <li><p>And: <pre>npm start</pre></p></li>
                                    </ul>
                                </div>
                                <div id="angular-cli" class="tab-pane">
                                    <ul>
                                        <li><p>Install NodeJs from <a href="https://nodejs.org/en" target="_blank">NodeJs Official Page</a></p></li>
                                        <li><p>Open Terminal</p></li>
                                        <li><p>Go to your file project</p></li>
                                        <li><p>Run in terminal:<pre>npm install -g @angular/cli</pre></p></li>
                                        <li><p>Then:<pre>npm install</pre></p></li>
                                        <li><p>And: <pre>ng serve</pre></p></li>
                                        <li><p>Navigate to: <a href="http://localhost:4200/" target="_blank">http://localhost:4200/</a></p></li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                        <div class="tim-row">
                            <h2 class="text-left">File Structure</h2>
                            <legend></legend>
                            <p>
                                Once you have downloaded the archive and opened it, you will find the following structure:
                            </p>
                            <ul role="tablist" class="nav nav-tabs">
                                <li role="presentation" class="active">
                                    <a href="#file-structure" data-toggle="tab">Angular2</a>
                                </li>
                                <li>
                                    <a href="#file-structure-cli" data-toggle="tab">Angular CLI</a>
                                </li>
                            </ul>
                            <div class="tab-content">
                                <div id="file-structure" class="tab-pane active">
                                    <pre>
md-pro-angular2
├── LICENSE.pdf
├── README.md
├── app
│   ├── app.component.html
│   ├── app.component.js
│   ├── app.component.js.map
│   ├── app.component.ts
│   ├── app.module.js
│   ├── app.module.js.map
│   ├── app.module.ts
│   ├── dashboard
│   │   ├── calendar
│   │   │   ├── calendar.component.html
│   │   │   ├── calendar.component.js
│   │   │   ├── calendar.component.js.map
│   │   │   └── calendar.component.ts
│   │   ├── charts
│   │   │   ├── charts.component.html
│   │   │   ├── charts.component.js
│   │   │   ├── charts.component.js.map
│   │   │   └── charts.component.ts
│   │   ├── components
│   │   │   ├── buttons
│   │   │   │   ├── buttons.component.html
│   │   │   │   ├── buttons.component.js
│   │   │   │   ├── buttons.component.js.map
│   │   │   │   └── buttons.component.ts
│   │   │   ├── grid
│   │   │   │   ├── grid.component.html
│   │   │   │   ├── grid.component.js
│   │   │   │   ├── grid.component.js.map
│   │   │   │   └── grid.component.ts
│   │   │   ├── icons
│   │   │   │   ├── icons.component.html
│   │   │   │   ├── icons.component.js
│   │   │   │   ├── icons.component.js.map
│   │   │   │   └── icons.component.ts
│   │   │   ├── notifications
│   │   │   │   ├── notifications.component.html
│   │   │   │   ├── notifications.component.js
│   │   │   │   ├── notifications.component.js.map
│   │   │   │   └── notifications.component.ts
│   │   │   ├── panels
│   │   │   │   ├── panels.component.html
│   │   │   │   ├── panels.component.js
│   │   │   │   ├── panels.component.js.map
│   │   │   │   └── panels.component.ts
│   │   │   ├── sweetalert
│   │   │   │   ├── sweetalert.component.html
│   │   │   │   ├── sweetalert.component.js
│   │   │   │   ├── sweetalert.component.js.map
│   │   │   │   └── sweetalert.component.ts
│   │   │   └── typography
│   │   │       ├── typography.component.html
│   │   │       ├── typography.component.js
│   │   │       ├── typography.component.js.map
│   │   │       └── typography.component.ts
│   │   ├── dashboard.component.html
│   │   ├── dashboard.component.js
│   │   ├── dashboard.component.js.map
│   │   ├── dashboard.component.ts
│   │   ├── dashboard.module.js
│   │   ├── dashboard.module.js.map
│   │   ├── dashboard.module.ts
│   │   ├── dashboard.routes.js
│   │   ├── dashboard.routes.js.map
│   │   ├── dashboard.routes.ts
│   │   ├── forms
│   │   │   ├── extendedforms
│   │   │   │   ├── extendedforms.component.html
│   │   │   │   ├── extendedforms.component.js
│   │   │   │   ├── extendedforms.component.js.map
│   │   │   │   └── extendedforms.component.ts
│   │   │   ├── regularforms
│   │   │   │   ├── regularforms.component.html
│   │   │   │   ├── regularforms.component.js
│   │   │   │   ├── regularforms.component.js.map
│   │   │   │   └── regularforms.component.ts
│   │   │   ├── validationforms
│   │   │   │   ├── validationforms.component.html
│   │   │   │   ├── validationforms.component.js
│   │   │   │   ├── validationforms.component.js.map
│   │   │   │   └── validationforms.component.ts
│   │   │   └── wizard
│   │   │       ├── wizard.component.html
│   │   │       ├── wizard.component.js
│   │   │       ├── wizard.component.js.map
│   │   │       └── wizard.component.ts
│   │   ├── home
│   │   │   ├── home.component.html
│   │   │   ├── home.component.js
│   │   │   ├── home.component.js.map
│   │   │   └── home.component.ts
│   │   ├── maps
│   │   │   ├── fullscreenmap
│   │   │   │   ├── fullscreenmap.component.html
│   │   │   │   ├── fullscreenmap.component.js
│   │   │   │   ├── fullscreenmap.component.js.map
│   │   │   │   └── fullscreenmap.component.ts
│   │   │   ├── googlemaps
│   │   │   │   ├── googlemaps.component.html
│   │   │   │   ├── googlemaps.component.js
│   │   │   │   ├── googlemaps.component.js.map
│   │   │   │   └── googlemaps.component.ts
│   │   │   └── vectormaps
│   │   │       ├── vectormaps.component.html
│   │   │       ├── vectormaps.component.js
│   │   │       ├── vectormaps.component.js.map
│   │   │       └── vectormaps.component.ts
│   │   ├── pages
│   │   │   ├── timeline
│   │   │   │   ├── timeline.component.html
│   │   │   │   ├── timeline.component.js
│   │   │   │   ├── timeline.component.js.map
│   │   │   │   └── timeline.component.ts
│   │   │   └── user
│   │   │       ├── user.component.html
│   │   │       ├── user.component.js
│   │   │       ├── user.component.js.map
│   │   │       └── user.component.ts
│   │   ├── tables
│   │   │   ├── datatable.net
│   │   │   │   ├── datatable.component.html
│   │   │   │   ├── datatable.component.js
│   │   │   │   ├── datatable.component.js.map
│   │   │   │   └── datatable.component.ts
│   │   │   ├── extendedtable
│   │   │   │   ├── extendedtable.component.html
│   │   │   │   ├── extendedtable.component.js
│   │   │   │   ├── extendedtable.component.js.map
│   │   │   │   └── extendedtable.component.ts
│   │   │   └── regulartable
│   │   │       ├── regulartable.component.html
│   │   │       ├── regulartable.component.js
│   │   │       ├── regulartable.component.js.map
│   │   │       └── regulartable.component.ts
│   │   └── widgets
│   │       ├── widgets.component.html
│   │       ├── widgets.component.js
│   │       ├── widgets.component.js.map
│   │       └── widgets.component.ts
│   ├── main.js
│   ├── main.js.map
│   ├── main.ts
│   ├── shared
│   │   ├── footer
│   │   │   ├── footer.component.html
│   │   │   ├── footer.component.js
│   │   │   ├── footer.component.js.map
│   │   │   ├── footer.component.ts
│   │   │   ├── footer.module.js
│   │   │   ├── footer.module.js.map
│   │   │   └── footer.module.ts
│   │   └── navbar
│   │       ├── navbar.component.html
│   │       ├── navbar.component.js
│   │       ├── navbar.component.js.map
│   │       ├── navbar.component.ts
│   │       ├── navbar.module.js
│   │       ├── navbar.module.js.map
│   │       └── navbar.module.ts
│   └── sidebar
│       ├── sidebar-routes.config.js
│       ├── sidebar-routes.config.js.map
│       ├── sidebar-routes.config.ts
│       ├── sidebar.component.html
│       ├── sidebar.component.js
│       ├── sidebar.component.js.map
│       ├── sidebar.component.ts
│       ├── sidebar.metadata.js
│       ├── sidebar.metadata.js.map
│       ├── sidebar.metadata.ts
│       ├── sidebar.module.js
│       ├── sidebar.module.js.map
│       └── sidebar.module.ts
├── assets
│   ├── css
│   │   ├── bootstrap.min.css
│   │   ├── demo.css
│   │   ├── material-dashboard.css
│   │   └── material-dashboard.css.map
│   ├── img
│   ├── js
│   │   ├── core
│   │   ├── demo.js
│   │   ├── init
│   │   ├── material-dashboard-angular.js
│   │   ├── plugins
│   │   └── sidebar-moving-tab.js
│   └── sass
│       ├── material-dashboard
│       └── material-dashboard.scss
├── changelog.txt
├── documentation
│   ├── css
│   │   └── demo-documentation.css
│   └── tutorial-components.html
├── index.html
├── lock.html
├── login.html
├── package.json
├── pricing.html
├── register.html
├── systemjs.config.js
└── tsconfig.json
                                    </pre>
                                </div>
                                <div id="file-structure-cli" class="tab-pane">
                                    <pre>
md-pro-angular-cli
├── LICENSE.pdf
├── README.md
├── angular-cli.json
├── documentation
│   ├── css
│   │   └── demo-documentation.css
│   └── tutorial-components.html
├── e2e
├── karma.conf.js
├── package.json
├── protractor.conf.js
├── src
│   ├── app
│   │   ├── app.component.html
│   │   ├── app.component.ts
│   │   ├── app.module.ts
│   │   ├── app.routing.ts
│   │   ├── calendar
│   │   │   ├── calendar.component.html
│   │   │   ├── calendar.component.ts
│   │   │   ├── calendar.module.ts
│   │   │   └── calendar.routing.ts
│   │   ├── charts
│   │   │   ├── charts.component.html
│   │   │   ├── charts.component.ts
│   │   │   ├── charts.module.ts
│   │   │   └── charts.routing.ts
│   │   ├── components
│   │   │   ├── buttons
│   │   │   │   ├── buttons.component.html
│   │   │   │   └── buttons.component.ts
│   │   │   ├── components.module.ts
│   │   │   ├── components.routing.ts
│   │   │   ├── grid
│   │   │   │   ├── grid.component.html
│   │   │   │   └── grid.component.ts
│   │   │   ├── icons
│   │   │   │   ├── icons.component.html
│   │   │   │   └── icons.component.ts
│   │   │   ├── notifications
│   │   │   │   ├── notifications.component.html
│   │   │   │   └── notifications.component.ts
│   │   │   ├── panels
│   │   │   │   ├── panels.component.html
│   │   │   │   └── panels.component.ts
│   │   │   ├── sweetalert
│   │   │   │   ├── sweetalert.component.html
│   │   │   │   └── sweetalert.component.ts
│   │   │   └── typography
│   │   │       ├── typography.component.html
│   │   │       └── typography.component.ts
│   │   ├── dashboard
│   │   │   ├── dashboard.component.html
│   │   │   ├── dashboard.component.ts
│   │   │   ├── dashboard.module.ts
│   │   │   └── dashboard.routing.ts
│   │   ├── forms
│   │   │   ├── extendedforms
│   │   │   │   ├── extendedforms.component.html
│   │   │   │   └── extendedforms.component.ts
│   │   │   ├── forms.module.ts
│   │   │   ├── forms.routing.ts
│   │   │   ├── regularforms
│   │   │   │   ├── regularforms.component.html
│   │   │   │   └── regularforms.component.ts
│   │   │   └── wizard
│   │   │       ├── wizard.component.html
│   │   │       └── wizard.component.ts
│   │   ├── layouts
│   │   │   ├── admin
│   │   │   │   ├── admin-layout.component.html
│   │   │   │   └── admin-layout.component.ts
│   │   │   └── auth
│   │   │       ├── auth-layout.component.html
│   │   │       └── auth-layout.component.ts
│   │   ├── lbd
│   │   │   ├── lbd-chart
│   │   │   │   ├── lbd-chart.component.html
│   │   │   │   └── lbd-chart.component.ts
│   │   │   ├── lbd-footer
│   │   │   │   ├── lbd-footer.component.html
│   │   │   │   └── lbd-footer.component.ts
│   │   │   ├── lbd-navbar
│   │   │   │   ├── lbd-navbar.component.html
│   │   │   │   └── lbd-navbar.component.ts
│   │   │   ├── lbd-navbar-items
│   │   │   │   ├── lbd-navbar-items.component.html
│   │   │   │   └── lbd-navbar-items.component.ts
│   │   │   ├── lbd-table
│   │   │   │   ├── lbd-table.component.html
│   │   │   │   └── lbd-table.component.ts
│   │   │   ├── lbd.module.ts
│   │   │   └── services
│   │   │       ├── mobile-sidebar-toggle.service.ts
│   │   │       ├── navbar-title.service.ts
│   │   │       └── notification.service.ts
│   │   ├── main.ts
│   │   ├── maps
│   │   │   ├── fullscreenmap
│   │   │   │   ├── fullscreenmap.component.html
│   │   │   │   └── fullscreenmap.component.ts
│   │   │   ├── googlemaps
│   │   │   │   ├── googlemaps.component.html
│   │   │   │   └── googlemaps.component.ts
│   │   │   ├── maps.module.ts
│   │   │   ├── maps.routing.ts
│   │   │   └── vectormaps
│   │   │       ├── vectormaps.component.html
│   │   │       └── vectormaps.component.ts
│   │   ├── pages
│   │   │   ├── lock
│   │   │   │   ├── lock.component.html
│   │   │   │   └── lock.component.ts
│   │   │   ├── login
│   │   │   │   ├── login.component.html
│   │   │   │   └── login.component.ts
│   │   │   ├── pages.module.ts
│   │   │   ├── pages.routing.ts
│   │   │   ├── pricing
│   │   │   │   ├── pricing.component.html
│   │   │   │   └── pricing.component.ts
│   │   │   └── register
│   │   │       ├── register.component.html
│   │   │       └── register.component.ts
│   │   ├── shared
│   │   │   ├── footer
│   │   │   │   ├── footer.component.html
│   │   │   │   ├── footer.component.ts
│   │   │   │   └── footer.module.ts
│   │   │   └── navbar
│   │   │       ├── navbar.component.html
│   │   │       ├── navbar.component.ts
│   │   │       └── navbar.module.ts
│   │   ├── sidebar
│   │   │   ├── sidebar-routes.config.ts
│   │   │   ├── sidebar.component.html
│   │   │   ├── sidebar.component.ts
│   │   │   ├── sidebar.metadata.ts
│   │   │   └── sidebar.module.ts
│   │   ├── tables
│   │   │   ├── datatable.net
│   │   │   │   ├── datatable.component.html
│   │   │   │   └── datatable.component.ts
│   │   │   ├── extendedtable
│   │   │   │   ├── extendedtable.component.html
│   │   │   │   └── extendedtable.component.ts
│   │   │   ├── regulartable
│   │   │   │   ├── regulartable.component.html
│   │   │   │   └── regulartable.component.ts
│   │   │   ├── tables.module.ts
│   │   │   └── tables.routing.ts
│   │   ├── timeline
│   │   │   ├── timeline.component.html
│   │   │   ├── timeline.component.ts
│   │   │   ├── timeline.module.ts
│   │   │   └── timeline.routing.ts
│   │   ├── userpage
│   │   │   ├── user.component.html
│   │   │   ├── user.component.ts
│   │   │   ├── user.module.ts
│   │   │   └── user.routing.ts
│   │   └── widgets
│   │       ├── widgets.component.html
│   │       ├── widgets.component.ts
│   │       ├── widgets.module.ts
│   │       └── widgets.routing.ts
│   ├── assets
│   │   ├── css
│   │   │   ├── bootstrap.min.css
│   │   │   ├── demo.css
│   │   │   ├── material-dashboard.css
│   │   │   └── material-dashboard.css.map
│   │   ├── img
│   │   ├── js
│   │   │   ├── core
│   │   │   │   ├── jquery.perfect-scrollbar.min.js
│   │   │   │   ├── jquery.validate.min.js
│   │   │   │   └── material.min.js
│   │   │   └── plugins
│   │   │       ├── jquery-jvectormap.js
│   │   │       └── sweetalert2.min.js
│   │   └── sass
│   │       ├── material-dashboard
│   │       └── material-dashboard.scss
│   ├── environments
│   │   ├── environment.prod.ts
│   │   └── environment.ts
│   ├── favicon.ico
│   ├── index.html
│   ├── main.ts
│   ├── polyfills.ts
│   ├── styles.css
│   ├── test.ts
│   ├── tsconfig.app.json
│   ├── tsconfig.spec.json
│   └── typings.d.ts
├── tsconfig.json
├── tslint.json
├── typings
└── typings.json</pre>
                                </div>
                            </div>

                        </div>
                        <div class="tim-row">
                            <h2 class="text-left">Restyled Components</h2>
                            <legend></legend>
                            <p>
                                Here is the list of Bootstrap 3 components that were restyled in
                                <b>Material Dashboard Pro Angular</b>:
                                <ul>
                                    <li> Buttons </li>
                                    <li> Inputs</li>
                                    <li> Textarea</li>
                                    <li> Menu </li>
                                    <li> Dropdown</li>
                                    <li> Navigation Menu</li>
                                    <li> Labels</li>
                                    <li> Notifications</li>
                                    <li> Typography</li>
                                    <li> Tables</li>
                                    <li> Collapse </li>
                                    <li> Dropdown </li>
                                    <li> Pagination </li>
                                    <li> Progress Bars </li>
                                    <li> Select </li>
                                    <li> Tables </li>
                                    <li> Textarea </li>
                                    <li> Tooltips </li>
                                    <li> Typography </li>
                                </ul>
                            </p>
                        </div>
                        <div class="tim-row">
                            <h2 class="text-left">New Components</h2>
                            <legend></legend>
                            <p>
                                Besides giving the existing Bootstrap elements a new look, we added new ones, so that the interface and consistent and homogenous.
                            </p>
                            <p>
                                Going through them, we added:
                                <ul>
                                    <li> Checkboxes</li>
                                    <li> Radio Buttons</li>
                                    <li> Toggle Buttons </li>
                                    <li> Card Stats</li>
                                    <li> Tags </li>
                                    <li> Card Charts</li>
                                    <li> Card with tabs</li>
                                    <li> Material Icons</li>
                                    <li> Google Maps </li>
                                    <li> jVector Maps </li>
                                    <li> jQuery Validations </li>
                                    <li> DataTables </li>
                                    <li> DateTimePicker </li>
                                    <li> Maps </li>
                                    <li> Panels </li>
                                    <li> Sliders </li>
                                    <li> Sweet Alert </li>
                                    <li> Switches </li>
                                    <li> Wizard </li>
                                </ul>
                            </p>
                        </div>
                        <!-- End Tutorial Row -->
                        <div class="tim-row" id="components">
                            <h2 class="text-center">Components</h2>
                        </div>
                        <!-- buttons row -->
                        <div class="tim-row" id="buttons-row">
                            <h2>Buttons</h2>
                            <legend></legend>
                            <h4>Colors</h4>
                            <p>We worked over the original Bootstrap classes, choosing a different, slightly intenser colour palette.</p>
                            <p>
                                <button class="btn btn-default">Default</button>
                                <button class="btn btn-primary">Primary</button>
                                <button class="btn btn-info">Info</button>
                                <button class="btn btn-success">Success</button>
                                <button class="btn btn-warning">Warning</button>
                                <button class="btn btn-danger">Danger</button>
                                <button class="btn btn-rose">Rose</button>
                            </p>
                            <pre class="prettyprint">

&lt;button class=&quot;btn btn-default&quot;&gt;Default&lt;/button&gt;
&lt;button class=&quot;btn btn-primary&quot;&gt;Primary&lt;/button&gt;
&lt;button class=&quot;btn btn-info&quot;&gt;Info&lt;/button&gt;
&lt;button class=&quot;btn btn-success&quot;&gt;Success&lt;/button&gt;
&lt;button class=&quot;btn btn-warning&quot;&gt;Warning&lt;/button&gt;
&lt;button class=&quot;btn btn-danger&quot;&gt;Danger&lt;/button&gt;
&lt;button class=&quot;btn btn-rose&quot;&gt;Rose&lt;/button&gt;
    			</pre>
                            <h4>Sizes</h4>
                            <p>Buttons come in all needed sizes:</p>
                            <p>
                                <button class="btn btn-primary btn-lg">Large</button>
                                <button class="btn btn-primary">Normal</button>
                                <button class="btn btn-primary btn-sm">Small</button>
                                <button class="btn btn-primary btn-xs">Extra Small</button>
                            </p>
                            <pre class="prettyprint">

&lt;button class=&quot;btn btn-primary btn-lg&quot;&gt;Large&lt;/button&gt;
&lt;button class=&quot;btn btn-primary&quot;&gt;Normal&lt;/button&gt;
&lt;button class=&quot;btn btn-primary btn-sm&quot;&gt;Small&lt;/button&gt;
&lt;button class=&quot;btn btn-primary btn-xs&quot;&gt;Extra Small&lt;/button&gt;
    			</pre>
                            <h4>Styles</h4>
                            <p>We added extra classes that can help you better customise the look. You can use regular buttons, rounded corners buttons or simple buttons. If you are using buttons that only have an icon inside of them, you can add
                                <code>.btn-just-icon</code> so the icon properly aligns. Let's see some examples:
                            </p>
                            <p>
                                <button class="btn btn-primary">Default</button>
                                <button class="btn btn-primary btn-round">Round</button>
                                <button class="btn btn-primary btn-round">
                                    <i class="material-icons">favorite</i> With Icon
                                </button>
                                <button class="btn btn-primary btn-just-icon btn-round">
                                    <i class="material-icons">favorite</i>
                                </button>
                                <button class="btn btn-primary btn-simple">Simple</button>
                            </p>
                            <pre class="prettyprint">
&lt;button class=&quot;btn btn-primary &quot;&gt;Default&lt;/button&gt;
&lt;button class=&quot;btn btn-primary btn-round&quot;&gt;Round&lt;/button&gt;
&lt;button class=&quot;btn btn-primary btn-round&quot;&gt;
	&lt;i class=&quot;material-icons&quot;&gt;favorite&lt;/i&gt; With Icon
&lt;/button&gt;
&lt;button class=&quot;btn btn-primary btn-just-icon btn-round&quot;&gt;
	&lt;i class=&quot;material-icons&quot;&gt;favorite&lt;/i&gt;
&lt;/button&gt;
&lt;button class=&quot;btn btn-primary btn-simple&quot;&gt;Default&lt;/button&gt;
    			</pre>
                            <p>
                                Button groups, toolbars, and disabled state all work like they are supposed to. We used the Font Awesome icons that can be found
                                <a href="http://fortawesome.github.io/Font-Awesome/icons/" target="_blank">here</a> and Material Design Icons that can be found
                                <a href="https://design.google.com/icons/" target="_blank"> here</a>.
                            </p>
                            <br />
                            <h4>Social</h4>
                            <p>We have created special buttons for the main social networks. You can use the buttons with any styles, you just need to add the class
                                <code>.btn-[#social-network]</code> for the button to have the brand colour of the network. </p>
                            <button class="btn btn-fab btn-twitter">
                                <i class="fa fa-twitter"></i>
                            </button>
                            <button class="btn btn-just-icon btn-twitter">
                                <i class="fa fa-twitter"></i>
                            </button>
                            <button class="btn btn-simple btn-twitter btn-just-icon">
                                <i class="fa fa-twitter"></i>
                            </button>
                            <br />
                            <br />
                            <button class="btn btn-fab btn-facebook">
                                <i class="fa fa-facebook"> </i>
                            </button>
                            <button class="btn btn-fab btn-google">
                                <i class="fa fa-google"> </i>
                            </button>
                            <button class="btn btn-fab btn-linkedin">
                                <i class="fa fa-linkedin"></i>
                            </button>
                            <button class="btn btn-fab btn-pinterest">
                                <i class="fa fa-pinterest"></i>
                            </button>
                            <button class="btn btn-fab btn-youtube">
                                <i class="fa fa-youtube"> </i>
                            </button>
                            <button class="btn btn-fab btn-tumblr">
                                <i class="fa fa-tumblr"> </i>
                            </button>
                            <button class="btn btn-fab btn-github">
                                <i class="fa fa-github"></i>
                            </button>
                            <button class="btn btn-fab btn-dribbble">
                                <i class="fa fa-dribbble"></i>
                            </button>
                            <button class="btn btn-fab btn-reddit">
                                <i class="fa fa-reddit"></i>
                            </button>
                            <button class="btn btn-fab btn-instagram">
                                <i class="fa fa-instagram"> </i>
                            </button>
                            <pre class="prettyprint">
&lt;button class=&quot;btn btn-fab btn-twitter&quot;&gt;
    &lt;i class=&quot;fa fa-twitter&quot;&gt;&lt;/i&gt;
&lt;/button&gt;
&lt;button class=&quot;btn btn-just-icon btn-twitter&quot;&gt;
    &lt;i class=&quot;fa fa-twitter&quot;&gt;&lt;/i&gt;
&lt;/button&gt;
&lt;button class=&quot;btn btn-twitter btn-just-icon&quot;&gt;
    &lt;i class=&quot;fa fa-twitter&quot;&gt;&lt;/i&gt;
&lt;/button&gt;
&lt;br /&gt;
&lt;button class=&quot;btn btn-fab btn-facebook&quot;&gt;
    &lt;i class=&quot;fa fa-facebook&quot;&gt; &lt;/i&gt;
&lt;/button&gt;
&lt;button class=&quot;btn btn-fab btn-google&quot;&gt;
    &lt;i class=&quot;fa fa-google&quot;&gt; &lt;/i&gt;
&lt;/button&gt;
&lt;button class=&quot;btn btn-fab btn-linkedin&quot;&gt;
    &lt;i class=&quot;fa fa-linkedin&quot;&gt;&lt;/i&gt;
&lt;/button&gt;
&lt;button class=&quot;btn btn-fab btn-pinterest&quot;&gt;
    &lt;i class=&quot;fa fa-pinterest&quot;&gt;&lt;/i&gt;
&lt;/button&gt;
&lt;button class=&quot;btn btn-fab btn-youtube&quot;&gt;
    &lt;i class=&quot;fa fa-youtube&quot;&gt; &lt;/i&gt;
&lt;/button&gt;
&lt;button class=&quot;btn btn-fab btn-tumblr&quot;&gt;
    &lt;i class=&quot;fa fa-tumblr&quot;&gt; &lt;/i&gt;
&lt;/button&gt;
&lt;button class=&quot;btn btn-fab btn-github&quot;&gt;
    &lt;i class=&quot;fa fa-github&quot;&gt;&lt;/i&gt;
&lt;/button&gt;
&lt;button class=&quot;btn btn-fab btn-dribbble&quot;&gt;
    &lt;i class=&quot;fa fa-dribbble&quot;&gt;&lt;/i&gt;
&lt;/button&gt;
&lt;button class=&quot;btn btn-fab btn-reddit&quot;&gt;
    &lt;i class=&quot;fa fa-reddit&quot;&gt;&lt;/i&gt;
&lt;/button&gt;
&lt;button class=&quot;btn btn-fab btn-instagram&quot;&gt;
    &lt;i class=&quot;fa fa-instagram&quot;&gt; &lt;/i&gt;
&lt;/button&gt;
                </pre>
                        </div>
                        <!-- checkbox row -->
                        <div class="tim-row" id="checkbox-row">
                            <h2> Checkboxes </h2>
                            <legend></legend>
                            <p>
                                To use the custom checkboxes, you don't need to import any separate Javascript file, everything is inside material.min.js
                            </p>
                            <p>
                                <div class="checkbox">
                                    <label>
                                        <input type="checkbox" name="optionsCheckboxes"> Subscribe to newsletter
                                    </label>
                                </div>
                                <div class="checkbox">
                                    <label>
                                        <input type="checkbox" name="optionsCheckboxes"> Unchecked
                                    </label>
                                </div>
                                <div class="checkbox">
                                    <label>
                                        <input type="checkbox" name="optionsCheckboxes" checked> Checked
                                    </label>
                                </div>
                                <div class="checkbox">
                                    <label>
                                        <input type="checkbox" name="optionsCheckboxes" disabled> Disabled Unchecked
                                    </label>
                                </div>
                                <div class="checkbox">
                                    <label>
                                        <input type="checkbox" name="optionsCheckboxes" disabled checked> Disabled Checked
                                    </label>
                                </div>
                            </p>
                            <pre class="prettyprint">
&lt;div class=&quot;checkbox&quot;&gt;
	&lt;label&gt;
		&lt;input type=&quot;checkbox&quot; name=&quot;optionsCheckboxes&quot;&gt;
		Unchecked
	&lt;/label&gt;
&lt;/div&gt;
&lt;div class=&quot;checkbox&quot;&gt;
	&lt;label&gt;
		&lt;input type=&quot;checkbox&quot; name=&quot;optionsCheckboxes&quot; checked&gt;
		Checked
	&lt;/label&gt;
&lt;/div&gt;
&lt;div class=&quot;checkbox&quot;&gt;
	&lt;label&gt;
		&lt;input type=&quot;checkbox&quot; name=&quot;optionsCheckboxes&quot; disabled&gt;
		Disabled Unchecked
	&lt;/label&gt;
&lt;/div&gt;
&lt;div class=&quot;checkbox&quot;&gt;
	&lt;label&gt;
		&lt;input type=&quot;checkbox&quot; name=&quot;optionsCheckboxes&quot; disabled checked&gt;
		Disabled Checked
	&lt;/label&gt;
&lt;/div&gt;

				</pre>
                        </div>
                        <!-- end row -->
                        <!-- radio row -->
                        <div class="tim-row" id="radio-row">
                            <h2> Radio Buttons </h2>
                            <legend></legend>
                            <p>
                                To use the custom radio buttons, you don't need to import any separate Javascript file, everything is inside material.min.js.
                            </p>
                            <p>
                                <div class="radio">
                                    <label>
                                        <input type="radio" name="optionsRadios"> Radio is off
                                    </label>
                                </div>
                                <div class="radio">
                                    <label>
                                        <input type="radio" name="optionsRadios" checked="true"> Radio is on
                                    </label>
                                </div>
                                <div class="radio">
                                    <label>
                                        <input type="radio" name="optionsRadiosDisabled" disabled> Disabled Radio is off
                                    </label>
                                </div>
                                <div class="radio">
                                    <label>
                                        <input type="radio" name="optionsRadiosDisabled" checked="true" disabled> Disabled Radio is on
                                    </label>
                                </div>
                            </p>
                            <pre class="prettyprint">
&lt;div class=&quot;radio&quot;&gt;
	&lt;label&gt;
		&lt;input type=&quot;radio&quot; name=&quot;optionsRadios&quot;&gt;
		Radio is off
	&lt;/label&gt;
&lt;/div&gt;
&lt;div class=&quot;radio&quot;&gt;
	&lt;label&gt;
		&lt;input type=&quot;radio&quot; name=&quot;optionsRadios&quot; checked=&quot;true&quot;&gt;
		Radio is on
	&lt;/label&gt;
&lt;/div&gt;
&lt;div class=&quot;radio&quot;&gt;
	&lt;label&gt;
		&lt;input type=&quot;radio&quot; name=&quot;optionsRadiosDisabled&quot; disabled&gt;
		Disabled Radio is off
	&lt;/label&gt;
&lt;/div&gt;
&lt;div class=&quot;radio&quot;&gt;
	&lt;label&gt;
		&lt;input type=&quot;radio&quot; name=&quot;optionsRadiosDisabled&quot; checked=&quot;true&quot; disabled&gt;
		Disabled Radio is on
	&lt;/label&gt;
&lt;/div&gt;
    			</pre>
                        </div>
                        <!-- end row -->
                        <!-- switches row -->
                        <div class="tim-row" id="switch-row">
                            <h2>Toggle Buttons</h2>
                            <legend></legend>
                            <p>If you want to use something more special than a checkbox, we recommend the toggle buttons.</p>
                            <div class="togglebutton">
                                <label>
                                    <input type="checkbox" checked=""> Toggle is on
                                </label>
                            </div>
                            <div class="togglebutton">
                                <label>
                                    <input type="checkbox"> Toggle is off
                                </label>
                            </div>
                            <pre class="prettyprint">

&lt;div class=&quot;togglebutton&quot;&gt;
	&lt;label&gt;
    	&lt;input type=&quot;checkbox&quot; checked=&quot;&quot;&gt;
		Toggle is on
	&lt;/label&gt;
&lt;/div&gt;

&lt;div class=&quot;togglebutton&quot;&gt;
	&lt;label&gt;
    	&lt;input type=&quot;checkbox&quot;&gt;
		Toggle is off
	&lt;/label&gt;
&lt;/div&gt;
    			</pre>
                        </div>
                        <!-- end row -->
                        <!-- dropdown row -->
                        <div class="tim-row" id="dropdown-row">
                            <h2> Dropdown </h2>
                            <legend></legend>
                            <p> We are very proud to present the dropdown which has a subtle animation.
                                <b>IMPORTANT!</b> The focus state is
                                <b>Purple</b> by default and, on the dropdowns from the navbars, they will take the colour of the parent navbar.</p>
                            <div class="row">
                                <div class="col-md-3">
                                    <span class="dropdown">
                                        <button href="#pablo" class="btn dropdown-toggle" data-toggle="dropdown" aria-expanded="true">
                                            Regular
                                            <b class="caret"></b>
                                        </button>
                                        <ul class="dropdown-menu">
                                            <li>
                                                <a href="#pablo">Action</a>
                                            </li>
                                            <li>
                                                <a href="#pablo">Another action</a>
                                            </li>
                                            <li>
                                                <a href="#pablo">Something else here</a>
                                            </li>
                                            <li class="divider"></li>
                                            <li>
                                                <a href="#pablo">Separated link</a>
                                            </li>
                                            <li class="divider"></li>
                                            <li>
                                                <a href="#pablo">One more separated link</a>
                                            </li>
                                        </ul>
                                    </span>
                                </div>
                                <div class="col-md-3">
                                    <span class="dropdown">
                                        <button href="#pablo" class="btn dropdown-toggle" data-toggle="dropdown" aria-expanded="true">
                                            <img src="../src/assets/img/flags/US.png" /> Flags
                                            <b class="caret"></b>
                                        </button>
                                        <ul class="dropdown-menu">
                                            <li>
                                                <a href="#pablo">
                                                    <img src="../src/assets/img/flags/DE.png" /> Deutsch</a>
                                            </li>
                                            <li>
                                                <a href="#pablo">
                                                    <img src="../src/assets/img/flags/GB.png" /> English(UK)</a>
                                            </li>
                                            <li>
                                                <a href="#pablo">
                                                    <img src="../src/assets/img/flags/FR.png" /> Français</a>
                                            </li>
                                            <li>
                                                <a href="#pablo">
                                                    <img src="../src/assets/img/flags/RO.png" /> Română</a>
                                            </li>
                                            <li>
                                                <a href="#pablo">
                                                    <img src="../src/assets/img/flags/IT.png" /> Italiano</a>
                                            </li>
                                            <li class="divider"></li>
                                            <li>
                                                <a href="#pablo">
                                                    <img src="../src/assets/img/flags/ES.png" /> Español
                                                    <span class="label label-default">soon</span>
                                                </a>
                                            </li>
                                            <li>
                                                <a href="#pablo">
                                                    <img src="../src/assets/img/flags/BR.png" /> Português
                                                    <span class="label label-default">soon</span>
                                                </a>
                                            </li>
                                            <li>
                                                <a href="#pablo">
                                                    <img src="../src/assets/img/flags/JP.png" /> 日本語
                                                    <span class="label label-default">soon</span>
                                                </a>
                                            </li>
                                        </ul>
                                    </span>
                                </div>
                            </div>
                            <pre class="prettyprint">
&lt;div class=&quot;dropdown&quot;&gt;
	&lt;button href=&quot;#&quot; class=&quot;btn dropdown-toggle&quot; data-toggle=&quot;dropdown&quot; aria-expanded=&quot;true&quot; &gt;
    	Regular
    	&lt;b class=&quot;caret&quot;&gt;&lt;/b&gt;
	&lt;/button&gt;
	&lt;ul class=&quot;dropdown-menu&quot;&gt;
		&lt;li&gt;&lt;a href=&quot;#&quot;&gt;Action&lt;/a&gt;&lt;/li&gt;
		&lt;li&gt;&lt;a href=&quot;#&quot;&gt;Another action&lt;/a&gt;&lt;/li&gt;
		&lt;li&gt;&lt;a href=&quot;#&quot;&gt;Something else here&lt;/a&gt;&lt;/li&gt;
		&lt;li class=&quot;divider&quot;&gt;&lt;/li&gt;
		&lt;li&gt;&lt;a href=&quot;#&quot;&gt;Separated link&lt;/a&gt;&lt;/li&gt;
		&lt;li class=&quot;divider&quot;&gt;&lt;/li&gt;
		&lt;li&gt;&lt;a href=&quot;#&quot;&gt;One more separated link&lt;/a&gt;&lt;/li&gt;
	&lt;/ul&gt;
&lt;/div&gt;
    			</pre>
                        </div>
                        <!-- end row -->
                        <!-- dropup row -->
                        <div class="tim-row" id="dropup-row">
                            <h2> Dropup </h2>
                            <legend></legend>
                            <p>We restyled the dropup and added a different animation for the opening. You can see the full implementation below.</p>
                            <div class="col-sm-12">
                                <span class="dropup">
                                    <button href="#pablo" class="dropdown-toggle btn btn-primary btn-round" data-toggle="dropdown">Dropup
                                        <b class="caret"></b>
                                    </button>
                                    <!--                                  You can add classes for different colours on the next element -->
                                    <ul class="dropdown-menu dropdown-primary dropdown-menu-left">
                                        <li class="dropdown-header">Dropdown header</li>
                                        <li>
                                            <a href="#pablo">Action</a>
                                        </li>
                                        <li>
                                            <a href="#pablo">Another action</a>
                                        </li>
                                        <li>
                                            <a href="#pablo">Something else here</a>
                                        </li>
                                        <li class="divider"></li>
                                        <li>
                                            <a href="#pablo">Separated link</a>
                                        </li>
                                        <li class="divider"></li>
                                        <li>
                                            <a href="#pablo">One more separated link</a>
                                        </li>
                                    </ul>
                                </span>
                            </div>
                            <pre class="prettyprint">
&lt;span class=&quot;dropup&quot;&gt;
  &lt;button href=&quot;#&quot; class=&quot;dropdown-toggle btn btn-primary btn-round&quot; data-toggle=&quot;dropdown&quot;&gt;Dropup &lt;b class=&quot;caret&quot;&gt;&lt;/b&gt;&lt;/button&gt;
  &lt;ul class=&quot;dropdown-menu dropdown-primary dropdown-menu-right&quot;&gt;
    &lt;li class=&quot;dropdown-header&quot;&gt;Dropdown header&lt;/li&gt;
    &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Action&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Another action&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Something else here&lt;/a&gt;&lt;/li&gt;
    &lt;li class=&quot;divider&quot;&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Separated link&lt;/a&gt;&lt;/li&gt;
    &lt;li class=&quot;divider&quot;&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href=&quot;#&quot;&gt;One more separated link&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
&lt;/span&gt;
                </pre>
                        </div>
                        <!-- inputs row -->
                        <div class="tim-row" id="inputs-row">
                            <h2>Inputs </h2>
                            <legend></legend>
                            <p>
                                We restyled the Bootstrap inputs to give them a more flat, minimal look. You can use them with regular labels, floating labels and states or input groups.
                            </p>
                            <div class="row">
                                <div class="col-sm-4">
                                    <div class="form-group">
                                        <input type="text" value="" placeholder="Regular" class="form-control" />
                                    </div>
                                </div>
                                <div class="col-sm-4">
                                    <div class="form-group label-floating">
                                        <label class="control-label">With Floating Label</label>
                                        <input type="email" class="form-control">
                                    </div>
                                </div>
                                <div class="col-sm-4">
                                    <div class="form-group label-floating has-success">
                                        <label class="control-label">Success input</label>
                                        <input type="text" value="Success" class="form-control" />
                                        <span class="form-control-feedback">
                                            <i class="material-icons">done</i>
                                        </span>
                                    </div>
                                </div>
                                <div class="col-sm-4">
                                    <div class="form-group label-floating has-error">
                                        <label class="control-label">Error input</label>
                                        <input type="email" value="Error Input" class="form-control" />
                                        <span class="material-icons form-control-feedback">clear</span>
                                    </div>
                                </div>
                                <div class="col-sm-4">
                                    <div class="input-group">
                                        <span class="input-group-addon">
                                            <i class="material-icons">group</i>
                                        </span>
                                        <input type="text" class="form-control" placeholder="With Material Icons">
                                    </div>
                                </div>
                                <div class="col-sm-4">
                                    <div class="input-group">
                                        <span class="input-group-addon">
                                            <i class="fa fa-group"></i>
                                        </span>
                                        <input type="text" class="form-control" placeholder="With Font Awesome Icons">
                                    </div>
                                </div>
                            </div>
                            <pre class="prettyprint">

&lt;div class=&quot;col-sm-4&quot;&gt;
	&lt;div class=&quot;form-group&quot;&gt;
    	&lt;input type=&quot;text&quot; value=&quot;&quot; placeholder=&quot;Regular&quot; class=&quot;form-control&quot; /&gt;
	&lt;/div&gt;
&lt;/div&gt;

&lt;div class=&quot;col-sm-4&quot;&gt;
	&lt;div class=&quot;form-group label-floating&quot;&gt;
		&lt;label class=&quot;control-label&quot;&gt;With Floating Label&lt;/label&gt;
		&lt;input type=&quot;email&quot; class=&quot;form-control&quot;&gt;
	&lt;/div&gt;
&lt;/div&gt;

&lt;div class=&quot;col-sm-4&quot;&gt;
	&lt;div class=&quot;form-group label-floating has-success&quot;&gt;
		&lt;label class=&quot;control-label&quot;&gt;Success input&lt;/label&gt;
		&lt;input type=&quot;text&quot; value=&quot;Success&quot; class=&quot;form-control&quot; /&gt;
		&lt;span class=&quot;form-control-feedback&quot;&gt;
			&lt;i class=&quot;material-icons&quot;&gt;done&lt;/i&gt;
		&lt;/span&gt;
	&lt;/div&gt;
&lt;/div&gt;

&lt;div class=&quot;col-sm-4&quot;&gt;
	&lt;div class=&quot;form-group label-floating has-error&quot;&gt;
		&lt;label class=&quot;control-label&quot;&gt;Error input&lt;/label&gt;
		&lt;input type=&quot;email&quot; value=&quot;Error Input&quot; class=&quot;form-control&quot; /&gt;
		&lt;span class=&quot;material-icons form-control-feedback&quot;&gt;clear&lt;/span&gt;
	&lt;/div&gt;
&lt;/div&gt;

&lt;div class=&quot;col-sm-4&quot;&gt;
	&lt;div class=&quot;input-group&quot;&gt;
		&lt;span class=&quot;input-group-addon&quot;&gt;
			&lt;i class=&quot;material-icons&quot;&gt;group&lt;/i&gt;
		&lt;/span&gt;
		&lt;input type=&quot;text&quot; class=&quot;form-control&quot; placeholder=&quot;With Material Icons&quot;&gt;
	&lt;/div&gt;
&lt;/div&gt;

&lt;div class=&quot;col-sm-4&quot;&gt;
	&lt;div class=&quot;input-group&quot;&gt;
		&lt;span class=&quot;input-group-addon&quot;&gt;
			&lt;i class=&quot;fa fa-group&quot;&gt;&lt;/i&gt;
		&lt;/span&gt;
		&lt;input type=&quot;text&quot; class=&quot;form-control&quot; placeholder=&quot;With Font Awesome Icons&quot;&gt;
	&lt;/div&gt;
&lt;/div&gt;
				</pre>
                        </div>
                        <!-- end row -->
                        <!-- textarea row -->
                        <div class="tim-row" id="textarea-row">
                            <h2>Textarea</h2>
                            <legend></legend>
                            <p>The textarea has a new style, so it looks similar to all other inputs.</p>
                            <textarea class="form-control" placeholder="Here can be your nice text" rows="5"></textarea>
                            <pre class="prettyprint">
&lt;textarea class=&quot;form-control&quot; placeholder=&quot;Here can be your nice text&quot; rows=&quot;5&quot;&gt;&lt;/textarea&gt;
				</pre>
                        </div>
                        <!-- end row -->
                        <!--             select row -->
                        <div class="tim-row" id="select-row">
                            <h2>Select Boostrap
                                <small>v1.11.2</small>
                            </h2>
                            <legend></legend>
                            <p>We have styled the select picker to look similar to the dropdown and the other inputs.
                            <br><br> For more information please check
                            <b>
                                <a href="http://silviomoreto.github.io/bootstrap-select" target="_blank">Full Github Documentation</a>
                            </b>.</p>
                            <div class="row">
                                <div class="col-md-3">
                                    <select class="selectpicker" data-style="btn btn-primary btn-round" title="Single Select" data-size="7">
                                        <option disabled selected>Choose city</option>
                                        <option value="2">Foobar</option>
                                        <option value="3">Is great</option>
                                    </select>
                                </div>
                            </div>
                            <pre class="prettyprint">
&lt;select class=&quot;selectpicker&quot; data-style=&quot;btn btn-primary btn-round&quot; title=&quot;Single Select&quot; data-size=&quot;7&quot;&gt;
  &lt;option disabled selected&gt; Choose city&lt;/option&gt;
  &lt;option value=&quot;1&quot;&gt;Foobar&lt;/option&gt;
  &lt;option value=&quot;2&quot;&gt;Is great&lt;/option&gt;
&lt;/select&gt;
                </pre>
                        </div>
                        <!-- Jasny Bootstrap -->
                        <div class="tim-row" id="jasny-row">
                            <h2>FileUpload Jasny
                                <small>v3.1.3</small>
                            </h2>
                            <legend></legend>
                            <p>We have styled the select picker to look similar to the dropdown and the other inputs. <br><br> For more information please check
                            <b>
                                <a href="http://jasny.github.io/bootstrap" target="_blank">Full Github Documentation</a>
                            </b>.</p>
                            <div class="row">
                                <div class="col-md-4 col-sm-4">
                                    <div class="fileinput fileinput-new text-center" data-provides="fileinput">
                                        <div class="fileinput-new thumbnail">
                                            <img src="../src/assets/img/image_placeholder.jpg" alt="...">
                                        </div>
                                        <div class="fileinput-preview fileinput-exists thumbnail"></div>
                                        <div>
                                            <span class="btn btn-rose btn-round btn-file">
                                                <span class="fileinput-new">Select image</span>
                                                <span class="fileinput-exists">Change</span>
                                                <input type="file" name="..." />
                                            </span>
                                            <a href="#pablo" class="btn btn-danger btn-round fileinput-exists" data-dismiss="fileinput"><i class="fa fa-times"></i> Remove</a>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-3 col-sm-4">
                                    <div class="fileinput fileinput-new text-center" data-provides="fileinput">
                                        <div class="fileinput-new thumbnail img-circle">
                                            <img src="../src/assets/img/placeholder.jpg" alt="...">
                                        </div>
                                        <div class="fileinput-preview fileinput-exists thumbnail img-circle"></div>
                                        <div>
                                            <span class="btn btn-round btn-rose btn-file">
                                                <span class="fileinput-new">Add Photo</span>
                                                <span class="fileinput-exists">Change</span>
                                                <input type="file" name="..." />
                                            </span>
                                            <br />
                                            <a href="#pablo" class="btn btn-danger btn-round fileinput-exists" data-dismiss="fileinput"><i class="fa fa-times"></i> Remove</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <pre class="prettyprint">
&lt;div class="fileinput fileinput-new text-center" data-provides="fileinput"&gt;
    &lt;div class="fileinput-new thumbnail"&gt;
        &lt;img src="../../assets/img/image_placeholder.jpg" alt="..."&gt;
    &lt;/div&gt;
    &lt;div class="fileinput-preview fileinput-exists thumbnail"&gt;&lt;/div&gt;
    &lt;div&gt;
        &lt;span class="btn btn-rose btn-round btn-file"&gt;
            &lt;span class="fileinput-new"&gt;Select image&lt;/span&gt;
            &lt;span class="fileinput-exists"&gt;Change&lt;/span&gt;
            &lt;input type="file" name="..." /&gt;
        &lt;/span&gt;
        &lt;a href="#pablo" class="btn btn-danger btn-round fileinput-exists" data-dismiss="fileinput"&gt;&lt;i class="fa fa-times"&gt;&lt;/i&gt; Remove&lt;/a&gt;
    &lt;/div&gt;
&lt;/div&gt;

&lt;div class="fileinput fileinput-new text-center" data-provides="fileinput"&gt;
    &lt;div class="fileinput-new thumbnail img-circle"&gt;
        &lt;img src="../../assets/img/placeholder.jpg" alt="..."&gt;
    &lt;/div&gt;
    &lt;div class="fileinput-preview fileinput-exists thumbnail img-circle"&gt;&lt;/div&gt;
    &lt;div&gt;
        &lt;span class="btn btn-round btn-rose btn-file"&gt;
            &lt;span class="fileinput-new"&gt;Add Photo&lt;/span&gt;
            &lt;span class="fileinput-exists"&gt;Change&lt;/span&gt;
            &lt;input type="file" name="..." /&gt;&lt;/span&gt;
        &lt;br /&gt;
        &lt;a href="#pablo" class="btn btn-danger btn-round fileinput-exists" data-dismiss="fileinput"&gt;&lt;i class="fa fa-times"&gt;&lt;/i&gt; Remove&lt;/a&gt;
    &lt;/div&gt;
&lt;/div&gt;
                </pre>
                        </div>
                        <!-- navbar row -->
                        <div class="tim-row" id="navbar-row">
                            <h2>Navbar </h2>
                            <legend></legend>
                            <p>The classic Bootstrap Navbar was restyled:</p>
                            <div id="navbar">
                                <nav class="navbar navbar-default" role="navigation">
                                    <div class="container-fluid">
                                        <div class="navbar-header">
                                            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                                                <span class="sr-only">Toggle navigation</span>
                                                <span class="icon-bar"></span>
                                                <span class="icon-bar"></span>
                                                <span class="icon-bar"></span>
                                            </button>
                                            <a class="navbar-brand" href="#pablo">Brand</a>
                                        </div>
                                        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                                            <ul class="nav navbar-nav">
                                                <li class="active">
                                                    <a href="#pablo">Link</a>
                                                </li>
                                                <li>
                                                    <a href="#pablo">Link</a>
                                                </li>
                                                <li class="dropdown">
                                                    <a href="#pablo" class="dropdown-toggle" data-toggle="dropdown">Dropdown
                                                        <b class="caret"></b>
                                                    </a>
                                                    <ul class="dropdown-menu">
                                                        <li>
                                                            <a href="#pablo">Action</a>
                                                        </li>
                                                        <li>
                                                            <a href="#pablo">Another action</a>
                                                        </li>
                                                        <li>
                                                            <a href="#pablo">Something else here</a>
                                                        </li>
                                                        <li class="divider"></li>
                                                        <li>
                                                            <a href="#pablo">Separated link</a>
                                                        </li>
                                                        <li class="divider"></li>
                                                        <li>
                                                            <a href="#pablo">One more separated link</a>
                                                        </li>
                                                    </ul>
                                                </li>
                                            </ul>
                                        </div>
                                    </div>
                                </nav>
                            </div>
                            <!--  end navbar -->
                            <pre class="prettyprint">
&lt;nav class=&quot;navbar navbar-default&quot; role=&quot;navigation&quot;&gt;
	&lt;div class=&quot;container-fluid&quot;&gt;
    	&lt;div class=&quot;navbar-header&quot;&gt;
    		&lt;button type=&quot;button&quot; class=&quot;navbar-toggle&quot; data-toggle=&quot;collapse&quot; data-target=&quot;#bs-example-navbar-collapse-1&quot;&gt;
                &lt;span class=&quot;sr-only&quot;&gt;Toggle navigation&lt;/span&gt;
                &lt;span class=&quot;icon-bar&quot;&gt;&lt;/span&gt;
                &lt;span class=&quot;icon-bar&quot;&gt;&lt;/span&gt;
                &lt;span class=&quot;icon-bar&quot;&gt;&lt;/span&gt;
    		&lt;/button&gt;
    		&lt;a class=&quot;navbar-brand&quot; href=&quot;#&quot;&gt;Brand&lt;/a&gt;
    	&lt;/div&gt;

    	&lt;div class=&quot;collapse navbar-collapse&quot; id=&quot;bs-example-navbar-collapse-1&quot;&gt;
    		&lt;ul class=&quot;nav navbar-nav&quot;&gt;
				&lt;li class=&quot;active&quot;&gt;&lt;a href=&quot;#&quot;&gt;Link&lt;/a&gt;&lt;/li&gt;
        		&lt;li&gt;&lt;a href=&quot;#&quot;&gt;Link&lt;/a&gt;&lt;/li&gt;
        		&lt;li class=&quot;dropdown&quot;&gt;
        			&lt;a href=&quot;#&quot; class=&quot;dropdown-toggle&quot; data-toggle=&quot;dropdown&quot;&gt;Dropdown &lt;b class=&quot;caret&quot;&gt;&lt;/b&gt;&lt;/a&gt;
        			&lt;ul class=&quot;dropdown-menu&quot;&gt;
					  &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Action&lt;/a&gt;&lt;/li&gt;
					  &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Another action&lt;/a&gt;&lt;/li&gt;
					  &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Something else here&lt;/a&gt;&lt;/li&gt;
					  &lt;li class=&quot;divider&quot;&gt;&lt;/li&gt;
					  &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Separated link&lt;/a&gt;&lt;/li&gt;
					  &lt;li class=&quot;divider&quot;&gt;&lt;/li&gt;
				      &lt;li&gt;&lt;a href=&quot;#&quot;&gt;One more separated link&lt;/a&gt;&lt;/li&gt;
        			&lt;/ul&gt;
        		&lt;/li&gt;
    		&lt;/ul&gt;
    	&lt;/div&gt;
	&lt;/div&gt;
&lt;/nav&gt;
	    		</pre>
                            <p class="space-top">Besides the default navbar, we added 5 new colors: primary, blue, green, orange, red. If you want to use one of them, you have to replace the
                                <code>.navbar-default</code> or
                                <code>.navbar-primary</code> with the class for the chosen colour
                                <code>.navbar-info</code>,
                                <code>.navbar-success</code>,
                                <code>.navbar-warning</code> or
                                <code>.navbar-danger</code>.</p>
                            <!-- navbar default -->
                            <div id="navbar-default">
                                <nav class="navbar navbar-default" role="navigation">
                                    <div class="container-fluid">
                                        <!-- Brand and toggle get grouped for better mobile display -->
                                        <div class="navbar-header">
                                            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                                                <span class="sr-only">Toggle navigation</span>
                                                <span class="icon-bar"></span>
                                                <span class="icon-bar"></span>
                                                <span class="icon-bar"></span>
                                            </button>
                                            <a class="navbar-brand" href="#pablo">Brand</a>
                                        </div>
                                        <!-- Collect the nav links, forms, and other content for toggling -->
                                        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                                            <ul class="nav navbar-nav">
                                                <li class="active">
                                                    <a href="#pablo">Link</a>
                                                </li>
                                                <li>
                                                    <a href="#pablo">Link</a>
                                                </li>
                                            </ul>
                                        </div>
                                    </div>
                                </nav>
                            </div>
                            <!--  end navbar -->
                            <!-- navbar info -->
                            <div id="navbar-info">
                                <nav class="navbar navbar-info" role="navigation">
                                    <div class="container-fluid">
                                        <!-- Brand and toggle get grouped for better mobile display -->
                                        <div class="navbar-header">
                                            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                                                <span class="sr-only">Toggle navigation</span>
                                                <span class="icon-bar"></span>
                                                <span class="icon-bar"></span>
                                                <span class="icon-bar"></span>
                                            </button>
                                            <a class="navbar-brand" href="#pablo">Brand</a>
                                        </div>
                                        <!-- Collect the nav links, forms, and other content for toggling -->
                                        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                                            <ul class="nav navbar-nav">
                                                <li class="active">
                                                    <a href="#pablo">Link</a>
                                                </li>
                                                <li>
                                                    <a href="#pablo">Link</a>
                                                </li>
                                            </ul>
                                        </div>
                                        <!-- /.navbar-collapse -->
                                    </div>
                                    <!-- /.container-fluid -->
                                </nav>
                            </div>
                            <!--  end navbar -->
                            <!-- navbar success -->
                            <div id="navbar-success">
                                <nav class="navbar navbar-success" role="navigation">
                                    <div class="container-fluid">
                                        <!-- Brand and toggle get grouped for better mobile display -->
                                        <div class="navbar-header">
                                            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                                                <span class="sr-only">Toggle navigation</span>
                                                <span class="icon-bar"></span>
                                                <span class="icon-bar"></span>
                                                <span class="icon-bar"></span>
                                            </button>
                                            <a class="navbar-brand" href="#pablo">Brand</a>
                                        </div>
                                        <!-- Collect the nav links, forms, and other content for toggling -->
                                        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                                            <ul class="nav navbar-nav">
                                                <li class="active">
                                                    <a href="#pablo">Link</a>
                                                </li>
                                                <li>
                                                    <a href="#pablo">Link</a>
                                                </li>
                                            </ul>
                                        </div>
                                        <!-- /.navbar-collapse -->
                                    </div>
                                    <!-- /.container-fluid -->
                                </nav>
                            </div>
                            <!--  end navbar -->
                            <!-- navbar warning -->
                            <div id="navbar-warning">
                                <nav class="navbar navbar-warning" role="navigation">
                                    <div class="container-fluid">
                                        <!-- Brand and toggle get grouped for better mobile display -->
                                        <div class="navbar-header">
                                            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                                                <span class="sr-only">Toggle navigation</span>
                                                <span class="icon-bar"></span>
                                                <span class="icon-bar"></span>
                                                <span class="icon-bar"></span>
                                            </button>
                                            <a class="navbar-brand" href="#pablo">Brand</a>
                                        </div>
                                        <!-- Collect the nav links, forms, and other content for toggling -->
                                        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                                            <ul class="nav navbar-nav">
                                                <li class="active">
                                                    <a href="#pablo">Link</a>
                                                </li>
                                                <li>
                                                    <a href="#pablo">Link</a>
                                                </li>
                                            </ul>
                                        </div>
                                        <!-- /.navbar-collapse -->
                                    </div>
                                    <!-- /.container-fluid -->
                                </nav>
                            </div>
                            <!--  end navbar -->
                            <!-- navbar danger -->
                            <div id="navbar-danger">
                                <nav class="navbar navbar-danger" role="navigation">
                                    <div class="container-fluid">
                                        <!-- Brand and toggle get grouped for better mobile display -->
                                        <div class="navbar-header">
                                            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                                                <span class="sr-only">Toggle navigation</span>
                                                <span class="icon-bar"></span>
                                                <span class="icon-bar"></span>
                                                <span class="icon-bar"></span>
                                            </button>
                                            <a class="navbar-brand" href="#pablo">Brand</a>
                                        </div>
                                        <!-- Collect the nav links, forms, and other content for toggling -->
                                        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                                            <ul class="nav navbar-nav">
                                                <li class="active">
                                                    <a href="#pablo">Link</a>
                                                </li>
                                                <li>
                                                    <a href="#pablo">Link</a>
                                                </li>
                                            </ul>
                                        </div>
                                        <!-- /.navbar-collapse -->
                                    </div>
                                    <!-- /.container-fluid -->
                                </nav>
                            </div>
                            <!--  end navbar -->
                            <p class="space-top">
                                Besides all this customisation, we have an extra navbar.
                                <code>.navbar-transparent</code> is a special class that you can to use if you want the navbar to be transparent.
                            </p>
                            <p class="space-top">
                                <b>Navbar Fixed:</b> please go <b>app/layouts/admin/admin-layout.component.html</b> and move the <code>&lt;navbar-cmp&gt;&lt;/navbar-cmp&gt;</code> outside of div with class <code>.main-panel</code>. Then go to <b>app/shared/navbar/navbar.component.html</b> and add the class <code>.navbar-dashboard-fixed-top</code>.

                            </p>
                        </div>
                        <!-- end row -->
                        <!-- nav pills row -->
                        <div class="tim-row" id="navpills-row">
                            <h2> Nav Pills</h2>
                            <legend></legend>
                            <p>
                                We changed the design for the Bootstrap nav pills into something a bit more fresh. We have also added more colour classes for customisation like
                                <code>.nav-pills-primary</code>,
                                <code>.nav-pills-info</code>,
                                <code>.nav-pills-success</code>,
                                <code>.nav-pills-warning</code>,
                                <code>.nav-pills-danger</code>.
                            </p>
                            <h4>Simple</h4>
                            <p>We added coloured shadows to the pills and created two options: horizontal and vertical (using the class
                                <code>.nav-stacked</code>).</p>
                            <div class="row">
                                <div class="col-md-6">
                                    <ul class="nav nav-pills nav-pills-info">
                                        <li class="active">
                                            <a href="#pill1" data-toggle="tab">Profile</a>
                                        </li>
                                        <li>
                                            <a href="#pill2" data-toggle="tab">Settings</a>
                                        </li>
                                        <li>
                                            <a href="#pill3" data-toggle="tab">Options</a>
                                        </li>
                                    </ul>
                                </div>
                                <div class="col-md-4">
                                    <ul class="nav nav-pills nav-pills-info nav-stacked">
                                        <li class="active">
                                            <a href="#tab1" data-toggle="tab">Profile</a>
                                        </li>
                                        <li>
                                            <a href="#tab2" data-toggle="tab">Settings</a>
                                        </li>
                                        <li>
                                            <a href="#tab3" data-toggle="tab">Options</a>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                            <h4>With Icons</h4>
                            <p>If you want to also add icons, you can use this version with the two options: horizontal and vertical. To use them, please add the
                                <code>.nav-pills-icons</code> class.</p>
                            <div class="row">
                                <div class="col-md-6">
                                    <ul class="nav nav-pills nav-pills-icons nav-pills-primary" role="tablist">
                                        <li>
                                            <a href="#dashboard" role="tab" data-toggle="tab">
                                                <i class="material-icons">dashboard</i> Dashboard
                                            </a>
                                        </li>
                                        <li class="active">
                                            <a href="#schedule" role="tab" data-toggle="tab">
                                                <i class="material-icons">schedule</i> Schedule
                                            </a>
                                        </li>
                                        <li>
                                            <a href="#tasks" role="tab" data-toggle="tab">
                                                <i class="material-icons">list</i> Tasks
                                            </a>
                                        </li>
                                    </ul>
                                </div>
                                <div class="col-md-2">
                                    <ul class="nav nav-pills nav-pills-icons nav-stacked" role="tablist">
                                        <li class="active">
                                            <a href="#dashboard-2" role="tab" data-toggle="tab">
                                                <i class="material-icons">dashboard</i> Dashboard
                                            </a>
                                        </li>
                                        <li>
                                            <a href="#schedule-2" role="tab" data-toggle="tab">
                                                <i class="material-icons">schedule</i> Schedule
                                            </a>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                            <pre class="prettyprint">
&lt;!-- simple and horizontal --&gt;
&lt;ul class=&quot;nav nav-pills nav-pills-info&quot;&gt;
  &lt;li class=&quot;active&quot;&gt;&lt;a href=&quot;#pill1&quot; data-toggle=&quot;tab&quot;&gt;Profile&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href=&quot;#pill2&quot; data-toggle=&quot;tab&quot;&gt;Settings&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href=&quot;#pill3&quot; data-toggle=&quot;tab&quot;&gt;Options&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;!-- simple and vertical --&gt;
&lt;ul class=&quot;nav nav-pills nav-pills-info nav-stacked&quot;&gt;
  &lt;li class=&quot;active&quot;&gt;&lt;a href=&quot;#tab1&quot; data-toggle=&quot;tab&quot;&gt;Profile&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href=&quot;#tab2&quot; data-toggle=&quot;tab&quot;&gt;Settings&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href=&quot;#tab3&quot; data-toggle=&quot;tab&quot;&gt;Options&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;!-- with icons and horizontal --&gt;
&lt;ul class=&quot;nav nav-pills nav-pills-icons nav-pills-primary&quot; role=&quot;tablist&quot;&gt;
	&lt;li&gt;
		&lt;a href=&quot;#dashboard&quot; role=&quot;tab&quot; data-toggle=&quot;tab&quot;&gt;
			&lt;i class=&quot;material-icons&quot;&gt;dashboard&lt;/i&gt;
			Dashboard
		&lt;/a&gt;
	&lt;/li&gt;
	&lt;li class=&quot;active&quot;&gt;
		&lt;a href=&quot;#schedule&quot; role=&quot;tab&quot; data-toggle=&quot;tab&quot;&gt;
			&lt;i class=&quot;material-icons&quot;&gt;schedule&lt;/i&gt;
			Schedule
		&lt;/a&gt;
	&lt;/li&gt;
	&lt;li&gt;
		&lt;a href=&quot;#tasks&quot; role=&quot;tab&quot; data-toggle=&quot;tab&quot;&gt;
			&lt;i class=&quot;material-icons&quot;&gt;list&lt;/i&gt;
			Tasks
		&lt;/a&gt;
	&lt;/li&gt;
&lt;/ul&gt;

&lt;!-- with icons and vertical --&gt;
&lt;ul class=&quot;nav nav-pills nav-pills-icons nav-stacked&quot; role=&quot;tablist&quot;&gt;
	&lt;li class=&quot;active&quot;&gt;
		&lt;a href=&quot;#dashboard-2&quot; role=&quot;tab&quot; data-toggle=&quot;tab&quot;&gt;
			&lt;i class=&quot;material-icons&quot;&gt;dashboard&lt;/i&gt;
			Dashboard
		&lt;/a&gt;
	&lt;/li&gt;
	&lt;li &gt;
        &lt;a href=&quot;#schedule-2&quot; role=&quot;tab&quot; data-toggle=&quot;tab&quot;&gt;
			&lt;i class=&quot;material-icons&quot;&gt;schedule&lt;/i&gt;
			Schedule
        &lt;/a&gt;
    &lt;/li&gt;
&lt;/ul&gt;
        		</pre>
                        </div>
                        <!-- end row -->
                        <!-- icons row -->
                        <div class="tim-row" id="icons-row">
                            <h2>Material Icons</h2>
                            <legend></legend>
                            <p>
                                Through most of the examples in this dashboard, we have used the default
                                <a href="https://design.google.com/icons/" target="_blank">Icons for the Material Design</a> provided by Google.
                            </p>

                            <i class="material-icons">face</i>
                            <pre class="prettyprint">

&lt;i class=&quot;material-icons&quot;&gt;face&lt;/i&gt;
			</pre>
            <p>
                <b>!IMPORTANT:</b> In case of using <b>Internet Explorer</b> or <b>Android Default Browser</b> the material icons will not appear and you most replace the text inside of <code>&lt;i class="material-icons"&gt;...&lt;/i&gt;</code> tag with coded version like in the example bellow. The coded version can be found on <a href="https://design.google.com/icons/" target="_blank">Icons for the Material Design</a> provided by Google.
            </p>
            <i class="material-icons">&#xE88A;</i>
            <pre class="prettyprint">
&#x3C;i class=&#x22;material-icons&#x22;&#x3E;&#x26;#xE88A;&#x3C;/i&#x3E;
            </pre>
                        </div>
                        <!-- end row -->
                        <!-- tables row -->
                        <div class="tim-row" id="tables-row">
                            <h2>Tables</h2>
                            <legend></legend>
                            <p>All Boostrap classes for tables are supported and improved.</p>
                            <h4>Simple Table inside a card</h4>
                            <div class="row">
                                <div class="col-md-12">
                                    <div class="card">
                                        <div class="card-header" data-background-color="purple">
                                            <h4 class="card-title">Table Title</h4>
                                            <p class="category">Here is a subtitle for this table</p>
                                        </div>
                                        <div class="card-content table-responsive">
                                            <table class="table">
                                                <thead class="text-danger">
                                                    <tr>
                                                        <th>Name</th>
                                                        <th>Country</th>
                                                        <th>City</th>
                                                        <th>Salary</th>
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                    <tr>
                                                        <td>Dakota Rice</td>
                                                        <td>Niger</td>
                                                        <td>Oud-Turnhout</td>
                                                        <td class="text-primary">$36,738</td>
                                                    </tr>
                                                    <tr>
                                                        <td>Minerva Hooper</td>
                                                        <td>Curaçao</td>
                                                        <td>Sinaai-Waas</td>
                                                        <td class="text-primary">$23,789</td>
                                                    </tr>
                                                    <tr>
                                                        <td>Sage Rodriguez</td>
                                                        <td>Netherlands</td>
                                                        <td>Baileux</td>
                                                        <td class="text-primary">$56,142</td>
                                                    </tr>
                                                    <tr>
                                                        <td>Philip Chaney</td>
                                                        <td>Korea, South</td>
                                                        <td>Overland Park</td>
                                                        <td class="text-primary">$38,735</td>
                                                    </tr>
                                                    <tr>
                                                        <td>Doris Greene</td>
                                                        <td>Malawi</td>
                                                        <td>Feldkirchen in Kärnten</td>
                                                        <td class="text-primary">$63,542</td>
                                                    </tr>
                                                    <tr>
                                                        <td>Mason Porter</td>
                                                        <td>Chile</td>
                                                        <td>Gloucester</td>
                                                        <td class="text-primary">$78,615</td>
                                                    </tr>
                                                </tbody>
                                            </table>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <pre class="prettyprint">

&lt;div class=&quot;card&quot;&gt;
	&lt;div class=&quot;card-header&quot; data-background-color=&quot;purple&quot;&gt;
		&lt;h4 class=&quot;card-title&quot;&gt;Table Title&lt;/h4&gt;
		&lt;p class=&quot;category&quot;&gt;Here is a subtitle for this table&lt;/p&gt;
	&lt;/div&gt;
	&lt;div class=&quot;card-content table-responsive table-full-width&quot;&gt;
		&lt;table class=&quot;table&quot;&gt;
			&lt;thead class=&quot;text-danger&quot;&gt;
				&lt;th&gt;Name&lt;/th&gt;
				&lt;th&gt;Country&lt;/th&gt;
				&lt;th&gt;City&lt;/th&gt;
				&lt;th&gt;Salary&lt;/th&gt;
			&lt;/thead&gt;
			&lt;tbody&gt;
				&lt;tr&gt;
					&lt;td&gt;Dakota Rice&lt;/td&gt;
					&lt;td&gt;Niger&lt;/td&gt;
					&lt;td&gt;Oud-Turnhout&lt;/td&gt;
					&lt;td class=&quot;text-primary&quot;&gt;$36,738&lt;/td&gt;
				&lt;/tr&gt;
				&lt;tr&gt;
					&lt;td&gt;Minerva Hooper&lt;/td&gt;
					&lt;td&gt;Cura&#231;ao&lt;/td&gt;
					&lt;td&gt;Sinaai-Waas&lt;/td&gt;
					&lt;td class=&quot;text-primary&quot;&gt;$23,789&lt;/td&gt;
				&lt;/tr&gt;
				&lt;tr&gt;
					&lt;td&gt;Sage Rodriguez&lt;/td&gt;
					&lt;td&gt;Netherlands&lt;/td&gt;
					&lt;td&gt;Baileux&lt;/td&gt;
					&lt;td class=&quot;text-primary&quot;&gt;$56,142&lt;/td&gt;
				&lt;/tr&gt;
				&lt;tr&gt;
					&lt;td&gt;Philip Chaney&lt;/td&gt;
					&lt;td&gt;Korea, South&lt;/td&gt;
					&lt;td&gt;Overland Park&lt;/td&gt;
					&lt;td class=&quot;text-primary&quot;&gt;$38,735&lt;/td&gt;
				&lt;/tr&gt;
				&lt;tr&gt;
					&lt;td&gt;Doris Greene&lt;/td&gt;
					&lt;td&gt;Malawi&lt;/td&gt;
					&lt;td&gt;Feldkirchen in K&#228;rnten&lt;/td&gt;
					&lt;td class=&quot;text-primary&quot;&gt;$63,542&lt;/td&gt;
				&lt;/tr&gt;
				&lt;tr&gt;
					&lt;td&gt;Mason Porter&lt;/td&gt;
					&lt;td&gt;Chile&lt;/td&gt;
					&lt;td&gt;Gloucester&lt;/td&gt;
					&lt;td class=&quot;text-primary&quot;&gt;$78,615&lt;/td&gt;
				&lt;/tr&gt;
			&lt;/tbody&gt;
		&lt;/table&gt;

	&lt;/div&gt;
&lt;/div&gt;
		    </pre>
                        </div>
                        <!-- end row -->
                        <!--             tags row -->
                        <div class="tim-row" id="tags-row">
                            <h2>jQuery Tagsinput
                                <small>v0.8.0</small>
                            </h2>
                            <legend></legend>
                            <p>The tags closely resemble the labels and follow the same line of colour. To use them, you need to use the default class
                                <code>.tagsinput</code>, and add a variation of the
                                <code>data-color="{ primary | info | success | warning | danger | rose }"</code>.
                                <br>
                                <br> For more information please check
                                <b>
                                    <a href="http://bootstrap-tagsinput.github.io/bootstrap-tagsinput/examples/" target="_blank">Full Github Documentation</a>
                                </b>.</p>
                            <input type="text" value="Amsterdam,Washington,Sydney,Beijing" class="tagsinput" data-role="tagsinput" data-color="rose" />
                            <pre class="prettyprint">
&lt;input type=&quot;text&quot; class=&quot;tagsinput&quot; data-role=&quot;tagsinput&quot; data-color=&quot;rose&quot; value=&quot;Amsterdam,Washington,Sydney,Beijing&quot; /&gt;
                </pre>
                        </div>
                        <!--             end row -->
                        <!-- notification row -->
                        <div class="tim-row" id="notification-row">
                            <h2> Bootstrap Notify
                                <small>v3.1.3</small>
                            </h2>
                            <legend></legend>
                            <p>
                                The new Material Dashboard Pro notification are looking fresh and clean. They go great with the navbar.
                                <br />
                                <br /> If you want to use add special animations for them, we integrated a third party plugin called Bootstrap Notify. Out friend Robert McIntosh did a wonderful job. If you want to see a coded example, you can see it below.
                                <br>
                                <br> For more information please check
                                <b>
                                    <a href="https://github.com/mouse0270/bootstrap-notify" target="_blank">Full Github Documentation</a>
                                </b>.</p>
                            <button class="btn btn-primary" onclick="showNotification('top','right')">Top Right Notification</button>
                            <pre class="prettyprint">
&lt;!-- button to trigger the action --&gt;
&lt;button class=&quot;btn btn-default&quot; onclick=&quot;showNotification(&#39;top&#39;,&#39;right&#39;)&quot;&gt;Top Right Notification&lt;/button&gt;

&lt;!-- javascript --&gt;

function showNotification(from, align){

    $.notify({
        icon: &quot;add_alert&quot;,
        message: &quot;Welcome to &lt;b&gt;Material Dashboard Pro&lt;/b&gt; - a beautiful dashboard for every web developer.&quot;

    },{
        type: 'success',
        timer: 4000,
        placement: {
            from: from,
            align: align
        }
    });
}
        </pre>
                            <div class="alert alert-info alert-with-icon" data-notify="container">
                                <i class="material-icons" data-notify="icon">add_alert</i>
                                <button type="button" class="close" data-dismiss="alert" aria-label="Close">x</button>
                                <span data-notify="message">This is a notification with close button and icon and have many lines. You can see that the icon and the close button are always vertically aligned. This is a beautiful notification. So you don't have to worry about the style.</span>
                            </div>
                            <div class="alert alert-success alert-with-icon" data-notify="container">
                                <i class="material-icons" data-notify="icon">check</i>
                                <button type="button" class="close" data-dismiss="alert" aria-label="Close">x</button>
                                <span data-notify="message">
                                    <b>Success Alert:</b> Yuhuuu! You've got your $11.99 album from The Weeknd</span>
                            </div>
                            <div class="alert alert-warning alert-with-icon">
                                <i class="material-icons" data-notify="icon">warning</i>
                                <button type="button" class="close" data-dismiss="alert" aria-label="Close">x</button>
                                <span data-notigy="message">
                                    <b>Warning Alert:</b> Hey, it looks like you still have the "copyright &copy; 2015" in your footer. Please update it! </span>
                            </div>
                            <div class="alert alert-danger alert-with-icon">
                                <i class="material-icons" data-notify="icon">error_outline</i>
                                <button type="button" class="close" data-dismiss="alert" aria-label="Close">x</button>
                                <span data-notify="message">
                                    <b>Error Alert:</b> Damn man! You screwed up the server this time. You should find a good excuse for your Boss...</span>
                            </div>
                            <pre class="prettyprint">
&lt;div class=&quot;alert alert-info alert-with-icon&quot;&gt;
    &lt;i class=&quot;material-icons&quot; data-notify=&quot;icon&quot; &gt;info_outline&lt;/i&gt;
    &lt;button type=&quot;button&quot; class=&quot;close&quot; data-dismiss=&quot;alert&quot; aria-label=&quot;Close&quot;&gt;x&lt;/button&gt;
    &lt;span data-notify=&quot;message&quot;&gt; &lt;b&gt;Info Alert:&lt;/b&gt; You&#39;ve got some friends nearby, stop looking at your phone and find them... &lt;/span&gt;
&lt;/div&gt;

&lt;div class=&quot;alert alert-success alert-with-icon&quot;&gt;
    &lt;i class=&quot;material-icons&quot; data-notify=&quot;icon&quot; &gt;check&lt;/i&gt;
    &lt;button type=&quot;button&quot; class=&quot;close&quot; data-dismiss=&quot;alert&quot; aria-label=&quot;Close&quot;&gt;x&lt;/button&gt;
    &lt;span data-notify=&quot;message&quot;&gt; &lt;b&gt;Success Alert:&lt;/b&gt; You&#39;ve got your $11.99 albul from The Weeknd &lt;/span&gt;
&lt;/div&gt;

&lt;div class=&quot;alert alert-warning alert-with-icon&quot;&gt;
    &lt;i class=&quot;material-icons&quot; data-notify=&quot;icon&quot; &gt;warning&lt;/i&gt;
    &lt;button type=&quot;button&quot; class=&quot;close&quot; data-dismiss=&quot;alert&quot; aria-label=&quot;Close&quot;&gt;x&lt;/button&gt;
    &lt;span data-notify=&quot;message&quot;&gt; &lt;b&gt;Warning Alert:&lt;/b&gt; Hey, it looks like you still have the &quot;copyright &amp;copy;  2015&quot; in your footer. Please update it! &lt;/span&gt;
&lt;/div&gt;


&lt;div class=&quot;alert alert-danger alert-with-icon&quot;&gt;
    &lt;i class=&quot;material-icons&quot; data-notify=&quot;icon&quot; &gt;error_outline&lt;/i&gt;
    &lt;button type=&quot;button&quot; class=&quot;close&quot; data-dismiss=&quot;alert&quot; aria-label=&quot;Close&quot;&gt;x&lt;/button&gt;
    &lt;span data-notify=&quot;message&quot;&gt; &lt;b&gt;Error Alert:&lt;/b&gt; Damn man! You screwed up the server this time. You should find a good excuse for your Boss... &lt;/span&gt;
&lt;/div&gt;
        </pre>
                        </div>
                        <!-- end row -->
                        <!-- datetimepicker row -->
                        <div class="tim-row" id="datetimepicker-row">
                            <h2>Bootstrap DateTimePicker
                                <small>v4.17.37</small>
                            </h2>
                            <legend></legend>
                            <p>We have created the design of the date-time picker made by
                                <a href="https://github.com/Eonasdan">Eonasdan</a>. We have changed the colors, typography and buttons, so it can look like the rest of the dashboard.
                                <br />
                                <br /> For more information please check
                                <b>
                                    <a href="https://eonasdan.github.io/bootstrap-datetimepicker/" target="_blank">Full Github Documentation</a>
                                </b>.
                                <br>
                                <br> Here is a coded example:
                            </p>
                            <div class="row">
                                <div class="col-md-4">
                                    <div class="form-group">
                                        <label class="label-control">Datetime Picker</label>
                                        <input type="text" class="form-control datetimepicker" value="10/05/2016" />
                                    </div>
                                </div>
                            </div>
                            <pre class="prettyprint">
&lt;!-- input with datetimepicker --&gt;
&lt;div class=&quot;form-group&quot;&gt;
    &lt;label class=&quot;label-control&quot;&gt;Datetime Picker&lt;/label&gt;
    &lt;input type=&quot;text&quot; class=&quot;form-control datetimepicker&quot; value=&quot;10/05/2016&quot;/&gt;
&lt;/div&gt;

&lt;!-- javascript for init --&gt;
    $(&#39;.datetimepicker&#39;).datetimepicker({
    icons: {
        time: &quot;fa fa-clock-o&quot;,
        date: &quot;fa fa-calendar&quot;,
        up: &quot;fa fa-chevron-up&quot;,
        down: &quot;fa fa-chevron-down&quot;,
        previous: &#39;fa fa-chevron-left&#39;,
        next: &#39;fa fa-chevron-right&#39;,
        today: &#39;fa fa-screenshot&#39;,
        clear: &#39;fa fa-trash&#39;,
        close: &#39;fa fa-remove&#39;
    }
});
    </pre>
                        </div>
                        <!-- end row -->
                        <!-- sweetalert row -->
                        <div class="tim-row" id="sweetalert-row">
                            <h2> Sweet Alert 2
                                <small>v5.3.5</small>
                            </h2>
                            <legend></legend>
                            <p>
                                If you want to replace the classic alert box with something that looks amazing, you can use the Sweet Alert 2 Plugin. We have changed the typography and colors for the plugin provided by
                                <a href="https://twitter.com/t4t5">Tristan Edwards</a>.
                                <br>
                                <br> For more information please check
                                <b>
                                    <a href="http://limonte.github.io/sweetalert2/" target="_blank">Full Github Documentation</a>
                                </b>.
                            </p>
                            <button class="btn btn-primary btn-fill" onclick='swal({ title:"Good job!", text: "You clicked the button!", type: "success", buttonsStyling: false, confirmButtonClass: "btn btn-success"})'>Try me!</button>
                            <pre class="prettyprint">
    &lt;button class=&quot;btn btn-primary btn-fill&quot; onclick=&#39;swal({ title:&quot;Good job!&quot;, text: &quot;You clicked the button!&quot;, type: &quot;success&quot;, buttonsStyling: false, confirmButtonClass: &quot;btn btn-success&quot;})&#39;&gt;Try me!&lt;/button&gt;
    &lt;!-- for more actions that you can use onclick, please check out assets/js/demo.js --&gt;
</pre>
                        </div>
                        <!-- end row -->
                        <!-- validation row -->
                        <div class="tim-row" id="validation-row">
                            <h2> jQuery Validation
                                <small>v1.14.0</small>
                            </h2>
                            <legend></legend>
                            <p>
                                If you have required fields in forms, the best way to add validation for them is through the jQuery Validation tool. We have imported it into the Material Dashboard Pro library and changed its colors.
                                <br />
                                <br /> For more information please check
                                <b>
                                    <a href="http://jqueryvalidation.org/" target="_blank">Full Documentation</a>
                                </b>. If you want to see a basic login example and the code behind it, check out the example below:
                            </p>
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="card">
                                        <form id="RegisterValidationDoc" action="" method="">
                                            <div class="card-header card-header-icon" data-background-color="blue">
                                                <i class="material-icons">mail_outline</i>
                                            </div>
                                            <div class="card-content">
                                                <h4 class="title">Register Forms</h4>
                                                <div class="form-group label-floating">
                                                    <label class="control-label">
                                                        Email Address
                                                        <small>(required)</small>
                                                    </label>
                                                    <input class="form-control" name="email" type="email" required="true" />
                                                </div>
                                                <div class="form-group label-floating">
                                                    <label class="control-label">
                                                        Password
                                                        <small>(required)</small>
                                                    </label>
                                                    <input class="form-control" name="password" id="registerPassword" type="password" required="true" />
                                                </div>
                                                <div class="form-group label-floating">
                                                    <label class="control-label">
                                                        Confirm Password
                                                        <small>(required)</small>
                                                    </label>
                                                    <input class="form-control" name="password_confirmation" id="registerPasswordConfirmation" type="password" required="true" equalTo="#registerPassword" />
                                                </div>
                                                <div class="category form-category">
                                                    <small>(required)</small> - Required fields</div>
                                                <div class="form-footer text-right">
                                                    <div class="checkbox pull-left">
                                                        <label>
                                                            <input type="checkbox" name="optionsCheckboxes"> Subscribe to newsletter
                                                        </label>
                                                    </div>
                                                    <button type="submit" class="btn btn-info btn-fill">Register</button>
                                                </div>
                                            </div>
                                        </form>
                                    </div>
                                </div>
                            </div>
                            <pre class="prettyprint">
&lt;!-- html for register --&gt;
&lt;div class=&quot;card&quot;&gt;
    &lt;form id=&quot;RegisterValidationDoc&quot; action=&quot;&quot; method=&quot;&quot;&gt;
        &lt;div class=&quot;card-header card-header-icon&quot; data-background-color=&quot;blue&quot;&gt;
            &lt;i class=&quot;material-icons&quot;&gt;mail_outline&lt;/i&gt;
        &lt;/div&gt;
        &lt;div class=&quot;card-content&quot;&gt;
            &lt;h4 class=&quot;card-title&quot;&gt;Register Forms&lt;/h4&gt;
            &lt;div class=&quot;form-group label-floating&quot;&gt;
                &lt;label class=&quot;control-label&quot;&gt;
                    Email Address
                    &lt;small&gt;(required)&lt;/small&gt;
                &lt;/label&gt;
                &lt;input class=&quot;form-control&quot;
                       name=&quot;email&quot;
                       type=&quot;email&quot;
                       required=&quot;true&quot;
                 /&gt;
            &lt;/div&gt;

            &lt;div class=&quot;form-group label-floating&quot;&gt;
                &lt;label class=&quot;control-label&quot;&gt;
                    Password
                    &lt;small&gt;(required)&lt;/small&gt;
                &lt;/label&gt;
                &lt;input class=&quot;form-control&quot;
                       name=&quot;password&quot;
                       id=&quot;registerPassword&quot;
                       type=&quot;password&quot;
                       required=&quot;true&quot;
                 /&gt;
            &lt;/div&gt;

            &lt;div class=&quot;form-group label-floating&quot;&gt;
                &lt;label class=&quot;control-label&quot;&gt;
                    Confirm Password
                    &lt;small&gt;(required)&lt;/small&gt;
                &lt;/label&gt;
                &lt;input class=&quot;form-control&quot;
                       name=&quot;password_confirmation&quot;
                       id=&quot;registerPasswordConfirmation&quot;
                       type=&quot;password&quot;
                       required=&quot;true&quot;
                       equalTo=&quot;#registerPassword&quot;
                 /&gt;
            &lt;/div&gt;


            &lt;div class=&quot;category form-category&quot;&gt;&lt;small&gt;(required)&lt;/small&gt; - Required fields&lt;/div&gt;

            &lt;div class=&quot;form-footer text-right&quot;&gt;
                &lt;div class=&quot;checkbox pull-left&quot;&gt;
                    &lt;label&gt;
                        &lt;input type=&quot;checkbox&quot; name=&quot;optionsCheckboxes&quot;&gt;
                        Subscribe to newsletter
                    &lt;/label&gt;
                &lt;/div&gt;

                &lt;button type=&quot;submit&quot; class=&quot;btn btn-info btn-fill&quot;&gt;Register&lt;/button&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/form&gt;
&lt;/div&gt;

&lt;!-- javascript for validation --&gt;
function setFormValidation(id){
	$(id).validate({
		errorPlacement: function(error, element) {
            $(element).parent(&#39;div&#39;).addClass(&#39;has-error&#39;);
         }
	});
}

setFormValidation(&#39;#RegisterValidationDoc&#39;);

</pre>
                        </div>
                        <!-- end row -->
                        <!-- validation row -->
                        <div class="tim-row" id="perfectscrollbar-row">
                            <h2> Perfect Scrollbar
                                <small>v0.6.13</small>
                            </h2>
                            <legend></legend>
                            <p>
                                "Minimalistic but perfect custom scrollbar plugin."
                                <br>
                                <br>
                                <b>!IMPORTANT</b> Perfect Scrollbar is applied on the
                                <code>.main-panel</code> and
                                <code>.sidebar .sidebar-wrapper</code> so we will have a nice scrollbar that is visible only when you actually scroll. Since it is changing the overflows of the CSS it is also affecting the child elements which have a scroll so please make sure that you add the class
                                <code>.ps-child</code> to any element that should have scroll.
                                <br><br> For more information please check
                                <b>
                                    <a href="https://github.com/noraesae/perfect-scrollbar" target="_blank">Full Github Documentation</a>
                                </b>.
                            </p>
                            <pre class="prettyprint">
&lt;!-- javascript for activating the Perfect Scrollbar --&gt;
$(&#x27;.sidebar .sidebar-wrapper, .main-panel&#x27;).perfectScrollbar();

&lt;!-- javascript for detroying the Perfect Scrollbar --&gt;
$(&#x27;.main-panel&#x27;).perfectScrollbar('destroy');

&lt;!-- javascript for updating the Perfect Scrollbar when the content of the page is changing --&gt;
$(&#x27;.main-panel&#x27;).perfectScrollbar('update');

</pre>
                        </div>
                        <!-- end row Perfect Scrollbar-->
                        <!-- cards row -->
                        <div class="tim-row" id="cards-row">
                            <h2>Cards</h2>
                            <legend></legend>
                            <p>We think cards are one of the best ways to organise your information. We went all out with possibilities and we recommended finding the right fit for your product. The general class for a card is called
                                <code>.card</code>. The information inside the card usually goes inside the content (class
                                <code>.card-content</code>). The content can have three types of elements inside:
                                <code>.card-title</code> and
                                <code>.category</code>. You can optionally add a
                                <code>.card-footer</code>, if you want to place a call-to-action.
                                <br /> You can change the color of the header using the
                                <code>data-background-color</code> attribute like this:
                                <code>data-background-color="{ purple | blue | green | orange | red | rose }"</code>.
                                <br>
                                <br> If you want to use the cards on white background you can remove it's shadow using the class
                                <code>.card-plain</code>
                            </p>
                            <br>
                            <br>
                            <h4>Cards Headers Type</h4>
                            <p>
                                The header of the cards start with the plain
                                <code>.card-header</code>, then you can add other types of headers based on what you want to show like:
                                <code>.card-header-icon</code> or
                                <code>.card-header-text</code>.
                            </p>
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="card">
                                        <div class="card-header">
                                            <h4 class="card-title">Regular header</h4>
                                            <p class="category">Category subtitle</p>
                                        </div>
                                        <div class="card-content">
                                            The place is close to Barceloneta Beach and bus stop just 2 min by walk and near to "Naviglio" where you can enjoy the main night life in Barcelona...
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="card">
                                        <div class="card-header" data-background-color="red">
                                            <h4 class="card-title">Full header coloured</h4>
                                            <p class="category">Category subtitle</p>
                                        </div>
                                        <div class="card-content">
                                            The place is close to Barceloneta Beach and bus stop just 2 min by walk and near to "Naviglio" where you can enjoy the main night life in Barcelona...
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="card">
                                        <div class="card-header card-header-icon" data-background-color="rose">
                                            <i class="material-icons">language</i>
                                        </div>
                                        <div class="card-content">
                                            <h4 class="card-title">Here is the Icon</h4>
                                            The place is close to Barceloneta Beach and bus stop just 2 min by walk and near to "Naviglio" where you can enjoy the main night life in Barcelona...
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="card">
                                        <div class="card-header card-header-text" data-background-color="purple">
                                            <h4 class="card-title">Here is the Text</h4>
                                            <p class="category">Category subtitle</p>
                                        </div>
                                        <div class="card-content">
                                            The place is close to Barceloneta Beach and bus stop just 2 min by walk and near to "Naviglio" where you can enjoy the main night life in Barcelona...
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <pre class="prettyprint">
&lt;div class=&quot;col-md-6&quot;&gt;
  &lt;div class=&quot;card&quot;&gt;
      &lt;div class=&quot;card-header&quot;&gt;
          &lt;h4 class=&quot;card-title&quot;&gt;Regular header&lt;/h4&gt;
          &lt;p class=&quot;category&quot;&gt;Category subtitle&lt;/p&gt;
      &lt;/div&gt;
      &lt;div class=&quot;card-content&quot;&gt;
            The place is close to Barceloneta Beach and bus stop just 2 min by walk and near to &quot;Naviglio&quot; where you can enjoy the main night life in Barcelona...
      &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;

&lt;div class=&quot;col-md-6&quot;&gt;
  &lt;div class=&quot;card&quot;&gt;
      &lt;div class=&quot;card-header&quot; data-background-color=&quot;red&quot;&gt;
          &lt;h4 class=&quot;card-title&quot;&gt;Full header coloured&lt;/h4&gt;
          &lt;p class=&quot;category&quot;&gt;Category subtitle&lt;/p&gt;
      &lt;/div&gt;
      &lt;div class=&quot;card-content&quot;&gt;
            The place is close to Barceloneta Beach and bus stop just 2 min by walk and near to &quot;Naviglio&quot; where you can enjoy the main night life in Barcelona...
      &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;

&lt;div class=&quot;col-md-6&quot;&gt;
    &lt;div class=&quot;card&quot;&gt;
        &lt;div class=&quot;card-header card-header-icon&quot; data-background-color=&quot;rose&quot;&gt;
            &lt;i class=&quot;material-icons&quot;&gt;language&lt;/i&gt;
        &lt;/div&gt;
        &lt;div class=&quot;card-content&quot;&gt;
            &lt;h4 class=&quot;card-title&quot;&gt;Here is the Icon&lt;/h4&gt;
                The place is close to Barceloneta Beach and bus stop just 2 min by walk and near to &quot;Naviglio&quot; where you can enjoy the main night life in Barcelona...
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;

&lt;div class=&quot;col-md-6&quot;&gt;
    &lt;div class=&quot;card&quot;&gt;
        &lt;div class=&quot;card-header card-header-text&quot; data-background-color=&quot;purple&quot;&gt;
            &lt;h4 class=&quot;card-title&quot;&gt;Here is the Text&lt;/h4&gt;
            &lt;p class=&quot;category&quot;&gt;Category subtitle&lt;/p&gt;
        &lt;/div&gt;
        &lt;div class=&quot;card-content&quot;&gt;
                The place is close to Barceloneta Beach and bus stop just 2 min by walk and near to &quot;Naviglio&quot; where you can enjoy the main night life in Barcelona...
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;
                </pre>
                            <br>
                            <br>
                            <h4>Cards with Animation</h4>
                            <p>
                                We've created some special cards that can have actions under the header, you can activate those cards but adding the property
                                <code>data-header-animation="true"</code>.
                                <b>Info:</b> After 20x hovers of one of these cards
                                <b>you can break it</b> :-)
                                <br> To stop the break effect you can go to assets/js/init/initAniCharts.js and find the variable
                                <code>breakCards = true</code> and set it to
                                <code>false</code>.
                            </p>
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="card card-chart">
                                        <div class="card-header" data-background-color="rose" data-header-animation="true">
                                            <div class="ct-chart" id="websiteViewsChart"></div>
                                        </div>
                                        <div class="card-content">
                                            <div class="card-actions">
                                                <button type="button" class="btn btn-danger btn-simple fix-broken-card">
                                                    <i class="material-icons">build</i> Fix Header!
                                                </button>
                                                <button type="button" class="btn btn-info btn-simple" rel="tooltip" data-placement="bottom" title="Refresh">
                                                    <i class="material-icons">refresh</i>
                                                </button>
                                                <button type="button" class="btn btn-default btn-simple" rel="tooltip" data-placement="bottom" title="Change Date">
                                                    <i class="material-icons">edit</i>
                                                </button>
                                            </div>
                                            <h4 class="card-title">Website Views</h4>
                                            <p class="category">Last Campaign Performance</p>
                                        </div>
                                        <div class="card-footer">
                                            <div class="stats">
                                                <i class="material-icons">access_time</i> campaign sent 2 days ago
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <pre class="prettyprint">
&lt;div class=&quot;card card-chart&quot;&gt;
    &lt;div class=&quot;card-header&quot; data-background-color=&quot;rose&quot; data-header-animation=&quot;true&quot;&gt;
        &lt;div class=&quot;ct-chart&quot; id=&quot;websiteViewsChart&quot;&gt;&lt;/div&gt;
    &lt;/div&gt;
    &lt;div class=&quot;card-content&quot;&gt;
        &lt;div class=&quot;card-actions&quot;&gt;
            &lt;button type=&quot;button&quot; class=&quot;btn btn-danger btn-simple fix-broken-card&quot;&gt;
				&lt;i class=&quot;material-icons&quot;&gt;build&lt;/i&gt; Fix Header!
			&lt;/button&gt;

            &lt;button type=&quot;button&quot; class=&quot;btn btn-info btn-simple&quot; rel=&quot;tooltip&quot; data-placement=&quot;bottom&quot; title=&quot;Refresh&quot;&gt;
                &lt;i class=&quot;material-icons&quot;&gt;refresh&lt;/i&gt;
            &lt;/button&gt;
            &lt;button type=&quot;button&quot; class=&quot;btn btn-default btn-simple&quot; rel=&quot;tooltip&quot; data-placement=&quot;bottom&quot; title=&quot;Change Date&quot;&gt;
                &lt;i class=&quot;material-icons&quot;&gt;edit&lt;/i&gt;
            &lt;/button&gt;
        &lt;/div&gt;
        ...
    &lt;/div&gt;
    &lt;div class=&quot;card-footer&quot;&gt;
        ...
    &lt;/div&gt;
&lt;/div&gt;
                </pre>
                            <h4>Card Chart</h4>
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="card">
                                        <div class="card-header card-chart" data-background-color="orange">
                                            <div class="ct-chart" id="dailySalesChart"></div>
                                        </div>
                                        <div class="card-content">
                                            <h4 class="card-title">Daily Sales</h4>
                                            <p class="category">
                                                <span class="text-success"><i class="fa fa-long-arrow-up"></i> 55% </span> increase in today sales.</p>
                                        </div>
                                        <div class="card-footer">
                                            <div class="stats">
                                                <i class="material-icons">access_time</i> updated 4 minutes ago
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <pre class="prettyprint">
&lt;div class=&quot;col-md-6&quot;&gt;
	&lt;div class=&quot;card&quot;&gt;
		&lt;div class=&quot;card-header card-chart&quot; data-background-color=&quot;orange&quot;&gt;
			&lt;div class=&quot;ct-chart&quot; id=&quot;dailySalesChart&quot;&gt;&lt;/div&gt;
		&lt;/div&gt;
		&lt;div class=&quot;card-content&quot;&gt;
			&lt;h4 class=&quot;card-title&quot;&gt;Daily Sales&lt;/h4&gt;
			&lt;p class=&quot;category&quot;&gt;&lt;span class=&quot;text-success&quot;&gt;&lt;i class=&quot;fa fa-long-arrow-up&quot;&gt;&lt;/i&gt; 55%  &lt;/span&gt; increase in today sales.&lt;/p&gt;
		&lt;/div&gt;
		&lt;div class=&quot;card-footer&quot;&gt;
			&lt;div class=&quot;stats&quot;&gt;
				&lt;i class=&quot;material-icons&quot;&gt;access_time&lt;/i&gt; updated 4 minutes ago
			&lt;/div&gt;
		&lt;/div&gt;
	&lt;/div&gt;
&lt;/div&gt;

// INFO: #dailySalesChart is initialised inside assets/js/demo.js on method initDocumentationCharts()
                </pre>
                            <h4>Card Stats</h4>
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="card card-stats">
                                        <div class="card-header" data-background-color="orange">
                                            <i class="material-icons">content_copy</i>
                                        </div>
                                        <div class="card-content">
                                            <p class="category">Used Space</p>
                                            <h3 class="card-title">49/50
                                                <small>GB</small>
                                            </h3>
                                        </div>
                                        <div class="card-footer">
                                            <div class="stats">
                                                <i class="material-icons text-danger">warning</i>
                                                <a href="#pablo">Get More Space...</a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="card card-stats">
                                        <div class="card-header" data-background-color="green">
                                            <i class="material-icons">store</i>
                                        </div>
                                        <div class="card-content">
                                            <p class="category">Revenue</p>
                                            <h3 class="card-title">$34,245</h3>
                                        </div>
                                        <div class="card-footer">
                                            <div class="stats">
                                                <i class="material-icons">date_range</i> Last 24 Hours
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <pre class="prettyprint">
&lt;div class=&quot;card card-stats&quot;&gt;
	&lt;div class=&quot;card-header&quot; data-background-color=&quot;orange&quot;&gt;
		&lt;i class=&quot;material-icons&quot;&gt;content_copy&lt;/i&gt;
	&lt;/div&gt;
	&lt;div class=&quot;card-content&quot;&gt;
		&lt;p class=&quot;category&quot;&gt;Used Space&lt;/p&gt;
		&lt;h3 class=&quot;card-title&quot;&gt;49/50&lt;small&gt;GB&lt;/small&gt;&lt;/h3&gt;
	&lt;/div&gt;
	&lt;div class=&quot;card-footer&quot;&gt;
		&lt;div class=&quot;stats&quot;&gt;
			&lt;i class=&quot;material-icons text-danger&quot;&gt;warning&lt;/i&gt; &lt;a href=&quot;#pablo&quot;&gt;Get More Space...&lt;/a&gt;
		&lt;/div&gt;
	&lt;/div&gt;
&lt;/div&gt;
                </pre>
                            <h4>Card Nav-Tabs</h4>
                            <div class="row">
                                <div class="col-lg-8 col-md-12">
                                    <div class="card">
                                        <div class="card-header card-header-tabs" data-background-color="purple">
                                            <div class="nav-tabs-navigation">
                                                <div class="nav-tabs-wrapper">
                                                    <span class="nav-tabs-title">Tasks:</span>
                                                    <ul class="nav nav-tabs" data-tabs="tabs">
                                                        <li class="active">
                                                            <a href="#profile" data-toggle="tab">
                                                                <i class="material-icons">bug_report</i> First
                                                                <div class="ripple-container"></div>
                                                            </a>
                                                        </li>
                                                        <li class="">
                                                            <a href="#messages" data-toggle="tab">
                                                                <i class="material-icons">code</i> Second
                                                                <div class="ripple-container"></div>
                                                            </a>
                                                        </li>
                                                        <li class="">
                                                            <a href="#settings" data-toggle="tab">
                                                                <i class="material-icons">cloud</i> Third
                                                                <div class="ripple-container"></div>
                                                            </a>
                                                        </li>
                                                    </ul>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="card-content">
                                            <div class="tab-content">
                                                <div class="tab-pane active" id="profile">
                                                    First Tab
                                                </div>
                                                <div class="tab-pane" id="messages">
                                                    Second Tab
                                                </div>
                                                <div class="tab-pane" id="settings">
                                                    Third Tab
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <pre class="prettyprint">
&lt;div class=&quot;card&quot;&gt;
	&lt;div class=&quot;card-header card-header-tabs&quot; data-background-color=&quot;purple&quot;&gt;
		&lt;div class=&quot;nav-tabs-navigation&quot;&gt;
			&lt;div class=&quot;nav-tabs-wrapper&quot;&gt;
				&lt;span class=&quot;nav-tabs-title&quot;&gt;Tasks:&lt;/span&gt;
				&lt;ul class=&quot;nav nav-tabs&quot; data-tabs=&quot;tabs&quot;&gt;
					&lt;li class=&quot;active&quot;&gt;
						&lt;a href=&quot;#profile&quot; data-toggle=&quot;tab&quot;&gt;
							&lt;i class=&quot;material-icons&quot;&gt;bug_report&lt;/i&gt;
							First
						&lt;div class=&quot;ripple-container&quot;&gt;&lt;/div&gt;&lt;/a&gt;
					&lt;/li&gt;
					&lt;li class=&quot;&quot;&gt;
						&lt;a href=&quot;#messages&quot; data-toggle=&quot;tab&quot;&gt;
							&lt;i class=&quot;material-icons&quot;&gt;code&lt;/i&gt;
							Second
						&lt;div class=&quot;ripple-container&quot;&gt;&lt;/div&gt;&lt;/a&gt;
					&lt;/li&gt;
					&lt;li class=&quot;&quot;&gt;
						&lt;a href=&quot;#settings&quot; data-toggle=&quot;tab&quot;&gt;
							&lt;i class=&quot;material-icons&quot;&gt;cloud&lt;/i&gt;
							Third
						&lt;div class=&quot;ripple-container&quot;&gt;&lt;/div&gt;&lt;/a&gt;
					&lt;/li&gt;
				&lt;/ul&gt;
			&lt;/div&gt;
		&lt;/div&gt;
	&lt;/div&gt;

	&lt;div class=&quot;card-content&quot;&gt;
		&lt;div class=&quot;tab-content&quot;&gt;
			&lt;div class=&quot;tab-pane active&quot; id=&quot;profile&quot;&gt;
				First Tab
			&lt;/div&gt;
			&lt;div class=&quot;tab-pane&quot; id=&quot;messages&quot;&gt;
				Second Tab
			&lt;/div&gt;
			&lt;div class=&quot;tab-pane&quot; id=&quot;settings&quot;&gt;
				Third Tab
			&lt;/div&gt;
		&lt;/div&gt;
	&lt;/div&gt;

&lt;/div&gt;

                </pre>
                            <h4>Card Pricing</h4>
                            <div class="row">
                                <div class="col-lg-4 col-md-6">
                                    <div class="card card-pricing card-plain">
                                        <div class="card-content">
                                            <h6 class="category">Freelancer</h6>
                                            <div class="icon">
                                                <i class="material-icons">weekend</i>
                                            </div>
                                            <h3 class="card-title">FREE</h3>
                                            <p class="card-description">
                                                This is good if your company size is between 2 and 10 Persons.
                                            </p>
                                            <a href="#pablo" class="btn btn-white btn-round">Choose Plan</a>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-lg-4 col-md-6">
                                    <div class="card card-pricing card-raised">
                                        <div class="card-content">
                                            <h6 class="category">Small Company</h6>
                                            <div class="icon icon-rose">
                                                <i class="material-icons">home</i>
                                            </div>
                                            <h3 class="card-title">$29</h3>
                                            <p class="card-description">
                                                This is good if your company size is between 2 and 10 Persons.
                                            </p>
                                            <a href="#pablo" class="btn btn-rose btn-round">Choose Plan</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <pre class="prettyprint">
&lt;div class=&quot;col-md-3&quot;&gt;
	&lt;div class=&quot;card card-pricing card-plain&quot;&gt;
		&lt;div class=&quot;card-content&quot;&gt;
			&lt;h6 class=&quot;category&quot;&gt;Freelancer&lt;/h6&gt;
			&lt;div class=&quot;icon&quot;&gt;
				&lt;i class=&quot;material-icons&quot;&gt;weekend&lt;/i&gt;
			&lt;/div&gt;
			&lt;h3 class=&quot;card-title&quot;&gt;FREE&lt;/h3&gt;
			&lt;p class=&quot;card-description&quot;&gt;
				This is good if your company size is between 2 and 10 Persons.
			&lt;/p&gt;
			&lt;a href=&quot;#pablo&quot; class=&quot;btn btn-white btn-round&quot;&gt;Choose Plan&lt;/a&gt;
		&lt;/div&gt;
	&lt;/div&gt;
&lt;/div&gt;

&lt;div class=&quot;col-md-3&quot;&gt;
	&lt;div class=&quot;card card-pricing card-raised&quot;&gt;
		&lt;div class=&quot;card-content&quot;&gt;
			&lt;h6 class=&quot;category&quot;&gt;Small Company&lt;/h6&gt;
			&lt;div class=&quot;icon icon-rose&quot;&gt;
				&lt;i class=&quot;material-icons&quot;&gt;home&lt;/i&gt;
			&lt;/div&gt;
			&lt;h3 class=&quot;card-title&quot;&gt;$29&lt;/h3&gt;
			&lt;p class=&quot;card-description&quot;&gt;
				This is good if your company size is between 2 and 10 Persons.
			&lt;/p&gt;
			&lt;a href=&quot;#pablo&quot; class=&quot;btn btn-rose btn-round&quot;&gt;Choose Plan&lt;/a&gt;
		&lt;/div&gt;
	&lt;/div&gt;
&lt;/div&gt;

                </pre>
                        </div>
                        <!-- end cards row -->
                        <!-- License Row -->
                        <div class="tim-row" id="changing-colors">
                            <h2>Changing Colors (SASS)</h2>
                            <legend></legend>
                            <p>You can change the default colors via variables from SASS:</p>
                            <ol>
                                <li>You can find the colors in assets/sass/material-dashboard/_variables.scss starting with line 28 where is the primary color set:
                                    <code>$brand-primary: $purple !default;</code>. All the possible colors are in assets/sass/material-dashboard/_colors.scss</li>
                                <li>Add the SASS folder from
                                    <code>assets/sass/</code> to a new project inside
                                    <a href="http://koala-app.com/" target="_blank">Koala Compiler</a> and find the file material-dashboard.scss, it will be the one in Green.</li>
                                <li>Right click on that file and set the output path, it must be in
                                    <code>assets/css/</code> so anything that you compile will overwrite the original material-dashboard.css</li>
                                <li>Press on compile and everything will be done automatically.</li>
                            </ol>
                        </div>
                        <div class="tim-row" id="api">
            				<h2>How to setup Google API Keys</h2>
            				<legend></legend>

            				<ol>
            					<li>
            						<p>Go to
            							<a href="https://developers.google.com/maps/documentation/javascript/get-api-key">https://developers.google.com/maps/documentation/javascript/get-api-key</a>
            						</p>
            					</li>
            					<li><p>Scroll to the “Get an API key” Title and press the “Get a Key” Button</p></li>
            					<li><p>Choose a name for your project then press on Create and Enable API</p></li>
            					<li><p>Get the Key and place it in your project where is this script:
            						<pre>&#x3C;script type=&#x22;text/javascript&#x22; src=&#x22;https://maps.googleapis.com/maps/api/js?key=YOUR_KEY_HERE&#x22;&#x3E;&#x3C;/script&#x3E;</pre>
            						</p>
            					</li>
            				</ol>

            			</div>
                    </div>
                    <!-- end container -->
                </div>
                <!--  end col-md-8 -->
            </div>
            <!-- end row -->
        </div>
        <!-- end first container-->
    </div>
    <!-- end section -->
    </div>
    <footer class="footer footer-transparent">
        <div class="container">
            <nav class="pull-left">
                <ul>
                    <li>
                        <a href="https://www.creative-tim.com">
                            Creative Tim
                        </a>
                    </li>
                    <li>
                        <a href="http://presentation.creative-tim.com">
                            About Us
                        </a>
                    </li>
                    <li>
                        <a href="http://blog.creative-tim.com">
                            Blog
                        </a>
                    </li>
                    <li>
                        <a href="https://www.creative-tim.com/license">
                            Licenses
                        </a>
                    </li>
                </ul>
            </nav>
            <div class="social-area pull-right">
                <a class="btn btn-just-icon btn-twitter btn-simple" href="https://twitter.com/CreativeTim">
                    <i class="fa fa-twitter"></i>
                </a>
                <a class="btn btn-just-icon btn-facebook btn-simple" href="https://www.facebook.com/CreativeTim">
                    <i class="fa fa-facebook-square"></i>
                </a>
                <a class="btn btn-just-icon btn-google btn-simple" href="https://plus.google.com/+CreativetimPage">
                    <i class="fa fa-google-plus"></i>
                </a>
                <a class="btn btn-just-icon btn-instagram btn-simple" href="https://www.instagram.com/creativetimofficial">
                    <i class="fa fa-instagram"></i>
                </a>
            </div>
            <div class="copyright">
                &copy;
                <script>
                    document.write(new Date().getFullYear())
                </script> Creative Tim, made with love
            </div>
        </div>
    </footer>
</body>
<!--   Core JS Files   -->
<script src="../node_modules/jquery/dist/jquery.min.js"></script>
<script src="../node_modules/bootstrap/dist/js/bootstrap.min.js" type="text/javascript"></script>
<script src="../src/assets/js/core/material.min.js" type="text/javascript"></script>
<script src="../node_modules/arrive/src/arrive.js" type="text/javascript"></script>
<script src="../node_modules/moment/moment.js"></script>
<!--  Charts Plugin -->
<script src="../node_modules/chartist/dist/chartist.js"></script>
<!--  Plugin for the Wizard -->
<script src="../node_modules/twitter-bootstrap-wizard/jquery.bootstrap.wizard.js"></script>
<script src="../src/assets/js/core/jquery.perfect-scrollbar.min.js" type="text/javascript"></script>
<!--  Notifications Plugin    -->
<script src="../node_modules/bootstrap-notify/bootstrap-notify.js"></script>

<!--  Plugin for Date Time Picker-->
<script src="../node_modules/eonasdan-bootstrap-datetimepicker/src/js/bootstrap-datetimepicker.js"
 type="text/javascript"></script>
 <!-- Vector Map plugin -->
 <script src="../src/assets/js/plugins/jquery-jvectormap.js"></script>
 <!-- Sliders Plugin -->
 <script src="../node_modules/nouislider/distribute/nouislider.min.js"></script>
 <!-- Select Plugin -->
 <script src="../node_modules/bootstrap-select/dist/js/bootstrap-select.js"></script>
 <!--  DataTables.net Plugin    -->
 <script src="../node_modules/datatables/media/js/jquery.dataTables.js"></script>
 <!--  Full Calendar Plugin    -->
 <script src="../node_modules/fullcalendar/dist/fullcalendar.js"></script>
 <!-- TagsInput Plugin -->
 <script src="../node_modules/bootstrap-tagsinput/dist/bootstrap-tagsinput.js"></script>

<!--  Google Maps Plugin    -->
<script src="https://maps.googleapis.com/maps/api/js"></script>

<!-- Sweet Alert 2 plugin -->
<script src="../src/assets/js/plugins/sweetalert2.min.js"></script>

<!--	Plugin for Fileupload, full documentation here: http://www.jasny.net/bootstrap/javascript/#fileinput -->
<script src="../node_modules/jasny-bootstrap/dist/js/jasny-bootstrap.min.js",></script>

<!-- Material Dashboard documentation methods -->
<script src="js/documentation.js"></script>

<!-- Material Dashboard DEMO methods, don't include it in your project! -->
<!-- <script src="../assets/js/demo.js"></script> -->
<script type="text/javascript">

</script>
<script>
    var header_height;
    var fixed_section;
    var floating = false;
    var breakCards = true;

    var searchVisible = 0;
    var transparent = true;

    var transparentDemo = true;
    var fixedTop = false;

    var mobile_menu_visible = 0,
        mobile_menu_initialized = false,
        toggle_initialized = false,
        bootstrap_nav_initialized = false;

    var seq = 0, delays = 80, durations = 500;
    var seq2 = 0, delays2 = 80, durations2 = 500;
    $().ready(function() {
        $('#menuresize a').click(function(){
            var href = $(this).attr('href');
            $('html,body').animate({
                'scrollTop': $($(this).attr('href')).offset().top - 100
            }, 200);
        })
        suggestions_distance = $("#suggestions").offset();
        pay_height = $('.fixed-section').outerHeight();
        if(breakCards == true){
            // We break the cards headers if there is too much stress on them :-)
            $('[data-header-animation="true"]').each(function(){
                var $fix_button = $(this)
                var $card = $(this).parent('.card');

                $card.find('.fix-broken-card').click(function(){
                    console.log(this);
                    var $header = $(this).parent().parent().siblings('.card-header, .card-image');

                    $header.removeClass('hinge').addClass('fadeInDown');

                    $card.attr('data-count',0);

                    setTimeout(function(){
                        $header.removeClass('fadeInDown animate');
                    },480);
                });

                $card.mouseenter(function(){
                    var $this = $(this);
                    hover_count = parseInt($this.attr('data-count'), 10) + 1 || 0;
                    $this.attr("data-count", hover_count);

                    if (hover_count >= 20){
                        $(this).children('.card-header, .card-image').addClass('hinge animated');
                    }
                });
            });
        }

        $(window).on('scroll', checkScrollForTransparentNavbar);
        /* ----------==========     Daily Sales Chart initialization For Documentation    ==========---------- */

        dataDailySalesChart = {
            labels: ['M', 'T', 'W', 'T', 'F', 'S', 'S'],
            series: [
                [12, 17, 7, 17, 23, 18, 38]
            ]
        };

        optionsDailySalesChart = {
            lineSmooth: Chartist.Interpolation.cardinal({
                tension: 0
            }),
            low: 0,
            high: 50, // creative tim: we recommend you to set the high sa the biggest value + something for a better look
            chartPadding: { top: 0, right: 0, bottom: 0, left: 0},
        }

        var dailySalesChart = new Chartist.Line('#dailySalesChart', dataDailySalesChart, optionsDailySalesChart);

        var animationHeaderChart = new Chartist.Line('#websiteViewsChart', dataDailySalesChart, optionsDailySalesChart);
    });

    //for datetimepickers
    $('.datetimepicker').datetimepicker({
        icons: {
            time: "fa fa-clock-o",
            date: "fa fa-calendar",
            up: "fa fa-chevron-up",
            down: "fa fa-chevron-down",
            previous: 'fa fa-chevron-left',
            next: 'fa fa-chevron-right',
            today: 'fa fa-screenshot',
            clear: 'fa fa-trash',
            close: 'fa fa-remove'

        }
    });


    function showNotification(from, align) {
        $.notify({
            icon: "notifications",
            message: "Welcome to <b>Material Dashboard Pro</b> - a beautiful dashboard for every web developer."

        }, {
            type: 'success',
            timer: 4000,
            placement: {
                from: from,
                align: align
            }
        });
    }
    function debounce(func, wait, immediate) {
    	var timeout;
    	return function() {
    		var context = this, args = arguments;
    		clearTimeout(timeout);
    		timeout = setTimeout(function() {
    			timeout = null;
    			if (!immediate) func.apply(context, args);
    		}, wait);
    		if (immediate && !timeout) func.apply(context, args);
    	};
    };
    function checkScrollForTransparentNavbar(){
        if($(document).scrollTop() > 381 ) {
            if(transparent) {
                transparent = false;
                $('.navbar-color-on-scroll').removeClass('navbar-transparent');
                $('.navbar-title').removeClass('hidden');
            }
        } else {
            if( !transparent ) {
                transparent = true;
                $('.navbar-color-on-scroll').addClass('navbar-transparent');
                $('.navbar-title').addClass('hidden');
            }
        }
    };

</script>

</html>
